如何异步等待直到我从数据库收到数据?

2024-04-14

我正在尝试创建可以通过屏幕访问的商店。文件结构:

  1. 索引.ios.js
  2. /app/index.js
  3. /app/store/database.js
  4. /app/store/userStore.js

索引.ios.js:

import { AppRegistry } from 'react-native';
import App from './app/index';
AppRegistry.registerComponent('AwesomeProject', () => App);

/app/index.js :

import React, { Component} from 'react';
import {
  Text,
  View,
} from 'react-native';
import userStore from './store/userStore';
import ViewBackground from './components/ViewBackground';

class App extends Component {
        constructor(props){
            super(props);
            this.isLoggedIn = true;     
        }

        componentDidMount() {       
            this.fetchUsers().done();
        }

        async fetchUsers(){
            console.log('Before User Fetch');
            var result = await userStore.getAllUsers();
            console.log('After User Fetch');
        }

        render() {
            if(this.isLoggedIn){
                return this.loggedInView();
            }else{
                return this.loggedOutView();
            }
        }

        loggedInView(){
            return <ViewBackground>

            </ViewBackground>
        }

        loggedOutView(){
            return <View>
            <Text>Hi, This is logged Out view </Text>
            </View>
        }
    }

    export default App;

/app/store/userStore.js :

import React from 'react';
    import database from './database';

    class UserStore{

        async getAllUsers(){
            let query = {
                type: 'SELECT',
                sql: 'SELECT * FROM Users',
                vals: [],
            }
            let queries = [query];
            console.log('in store before');
            let dbResult = await database.runQuery(queries);        
            console.log('in store after');
            return dbResult;        
        }
    }

    const userStore = new UserStore;

    export default userStore;

/app/store/database.js :

    'use strict';
    import React from 'react';
    import SQLite from 'react-native-sqlite-storage';
    SQLite.enablePromise(true);

    var database_name = "test.db";
    var database_version = "1.0";
    var database_displayname = "Test";
    var database_size = 1024 * 1024 * 10;

    class Database  {

        constructor(){
            SQLite.openDatabase(database_name, database_version, database_displayname, database_size).then(this.dbOpenSuccess).catch(this.dbOpenError);
        }

        dbOpenSuccess(dbInstance){
            this.conn = dbInstance;
        }

        dbOpenError(err) {

        }

        getConnection() {
            return this.conn;
        }

        setUpDatabase(){
            let queries = [
            'CREATE TABLE IF NOT EXISTS Users (user_id INTEGER PRIMARY KEY, f_name VARCHAR(64), l_name VARCHAR(64), email_id VARCHAR(128), mobile VARCHAR(10))'
            ];
            this.conn.transaction( tx => {
                queries.map( q => {
                    tx.executeSql(q, [], res => {}, err => {});
                });
            });
        }

        async runQuery(queries) {
            await this.conn.transaction(tx => {
                return Promise.all(queries.map(async (q) => {
                    try {
                        let results = null;
                        switch(q.type){
                            case 'SELECT':                      
                            results = await tx.executeSql(q.sql, q.vals);
                            console.log('Query', q, 'Executed. results:', results);
                            break;
                        }
                        
                    } catch(err) {
                        console.log('Something went wrong while executing query', q, 'error is', err);
                    }
                }));
            });
            return false;
        }

        closeDatabase(){
            this.conn.close().then(this.dbCloseSuccess).catch(this.dbCloseError);
        }

        dbCloseSuccess(res) {

        }

        dbCloseError(err){

        }
    }

    const dbInstance = new Database();

    dbInstance.setUpDatabase();

    export default dbInstance;

在 /app/index.js 中,我尝试从 userStore.js 中获取用户,它将调用 database.js 从数据库中检索用户。我想在从数据库获取用户时暂停执行,因此尝试了异步/等待。我用了console.log()检查执行是否暂停。异步/等待都不起作用。我收到回复after all console.log已经完成了。

我希望它等到我从数据库收到数据为止。


您需要将其包装在 Promise 中,然后在 sql 执行完成时解析结果。

例如

async () => {
  return new Promise((resolve, reject) => {
    db.transaction(tx => {
      tx.executeSql('SELECT * FROM users;', [], (tx, results) => {
        const { rows } = results;
        let users = [];

        for (let i = 0; i < rows.length; i++) {
          users.push({
            ...rows.item(i),
          });
        }

        resolve(users);

      });
    });
  });

}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何异步等待直到我从数据库收到数据? 的相关文章

  • 数字和数字对象有什么区别?

    存储在普通变量中的数字有什么区别 var foo 5 和一个数字对象 var bar new Number 5 数字对象可以用来做什么 A Number对象包含一些有用的方法和属性 例如 数字对象方法 Method Description
  • jQuery 显示隐藏左侧滑动面板

    我希望在单击按钮时面板从浏览器的左边缘滑动 并在单击同一按钮 切换 时隐藏面板 Html div class panel div a href class slider arrow show raquo a CSS panel width
  • d3js v5 + Topojson v3 关于加入 csv 和 json 的优化

    为了制作地图 我需要将一些值从 csv 导入到 json直接在代码中 为了加载 json 和 csv 文件 我使用 Promise 对象的异步操作 并使用两个循环和一个公共键在 json 文件上添加新属性 for var i 0 i lt
  • 无法获取子 DOM 元素

    注 由于问题有点复杂 为了可读性对代码进行了抽象 We ve a
  • 过滤文件上传仅用于文本文件

    我使用的是 Firefox 版本 14 0 1 我需要过滤上传文件窗口以仅显示 txt files 我的浏览器不仅仅支持文本文件 text plain 我可以通过指定此格式来限制图像文件 image 但我只需要过滤文本文件在文件选择器窗口中
  • 在 Graal.js 中使用 java 类

    使用 Graal js 如何将 java 类导入到 JS 脚本中 以下代码适用于 Nashorn JJS 但不适用于 Graal js 因为没有Java type 在graal中 我需要在某个时候调用truffle吗 var ArrayLi
  • 根据每个选项的值或 ID 过滤选择框

    我想使用jquery来过滤表单中的所有选择框 例如 在第一个选择框中 如果我选择 仅显示1 我想过滤所有选择元素中的所有选择选项 以隐藏值不包含 1 的任何选项 仅应显示带有 1 的产品值 如果选择 Filter 选项 则所有选择框的默认值
  • 如何在 blob 类型中使用 UTF-8?

    我必须通过 csv 文件导出表 csv 文件数据来自服务器 按 Blob 类型 Blob size 2067 type text csv async exportDocumentsByCsv this commonStore setLoad
  • 如何对基于 HTML5-JavaScript 的视频播放器进行快照?

    实际上 我有一个带有 JavaScript 函数的 HTML5 页面 可以让我播放 wmv 视频文件 我需要在视频播放时 有暂停或没有暂停 拍摄快照并以任何图像格式 JPG 或 BMP 保存 任何帮助将不胜感激 谢谢
  • 为什么我会失去对元素的引用?

    我偶然发现了一些奇怪的东西 至少对我来说 案例如下 我选择一个元素 child1 从 DOM 并将其保存到变量中 我继续添加一个新元素child1的家长 parent1 现在 如果我尝试修改某些值child1它不记录更改 似乎引用已经消失
  • 点击事件的事件处理程序自动触发 - jQuery [重复]

    这个问题在这里已经有答案了 可能的重复 为什么单击事件处理程序会在页面加载后立即触发 https stackoverflow com questions 7102413 why does click event handler fire i
  • 接近堆限制的无效标记压缩分配失败 - JavaScript 堆内存不足

    我正在使用 Angular 7 2 当我进入ng serve 我面临以下问题 致命错误 接近堆限制的无效标记压缩分配失败 JavaScript 堆内存不足 这意味着什么 我该如何解决这个问题 完整的错误消息是 FATAL ERROR Ine
  • 地理编码服务与 gMap 搜索之间的差异结果

    我想获取此地址的纬度和经度 Boulevard de la Marne Zone industrielle COULOMMIERS 77120 France 我将 api 添加到我的页面 当我使用 gmaps 时 结果很好 但是当我想通过
  • JSON.stringify 对于大型对象来说非常慢

    我在 javascript 中有一个非常大的对象 大约 10MB 当我对其进行字符串化时 需要很长时间 因此我将其发送到后端并将其解析为一个对象 实际上是带有数组的嵌套对象 这也需要很长时间 但这不是我们在这个问题中的问题 问题 我怎样才能
  • 当来自 Mozilla Firefox 和 MS Edge 上的剪贴板时 Alpha 会变成黑色

    我正在使用代码从这里 https stackoverflow com a 15369753 5875416将剪贴板中的图像粘贴到页面上 它在所有浏览器 Chrome Firefox Edge 和 Opera 中都能正常工作 问题是 当图像是
  • 仅在页面加载时执行 Javascript,而不是回发 (SharePoint)

    我正在尝试在 SharePoint 网站上的自定义页面上加载页面时执行一些 JavaScript 它使用当前用户填充人员选择器 问题是代码也在回发时执行 这是我不希望的 因为它会重置人员选择器的任何更改 我尝试过使用if IsPostBac
  • 何时使用node.js、sinatra、rails? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 这 3 种语言 框架的最佳用途是什么 混合所有 或 2 个 有用吗 如果您正在构建一个完整的 Web 应用程序 您可能应该使用 Rails 因为
  • 如何将所有后代节点和链接设置为与 2 级祖先相同的颜色?

    我有一个 d3 js 树 其后代节点接收其 2 级祖先的节点颜色 这在级别 2 到级别 3 之间有效 但在级别 4 及以上级别停止工作 相关代码 var colourScale d3 scale ordinal domain MD Prof
  • 如何使用 Typescript 将 jest.spyOn 与 React 函数组件一起使用

    我正在使用 Typescript 和 hooks 开发一个 React 应用程序 并且尝试使用 Enzyme 和 Jest 来测试功能组件 我无法使用 jest spyOn 来测试我的组件中的方法 jest spyOn 方法无法正确解析并在
  • 在 JSON 对象中存储和发送原始文件数据

    我正在寻找一种方法来传输任何文件类型的原始文件数据和任何可能的内容 我的意思是文件和文件内容都是用户生成的 在 Backbone 前端中使用 xhr ajax 调用两种方式针对 Django 后端 编辑 也许问题仍然不清楚 如果您在 IDE

随机推荐