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

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(使用前将#替换为@)

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

  • 无法在 IE 中的选择选项上使用 onmouseover 事件

    更新的代码 function getElements var x document getElementsByTagName option var el document getElementById selectDept el onmou
  • 所有事件的 HTML5 EventSource 监听器?

    我使用 EventSource 在 JavaScript 客户端应用程序中推送通知 我可以像这样附加事件监听器 source addEventListener my custom event type function e console
  • 发布到 npm 时出现问题

    所以我尝试使用 React 构建一个开源项目并将其推送到 npm 问题是 我的组件虽然在测试环境中运行良好 安装到其他组件 但当我将其发布到 npm 并下载包并尝试访问它时 它给了我一个错误 这是代码的一个小示例 import React
  • Facebook 自定义故事与大图像 - 使用 Javascript 打开图

    我正在尝试创建一个自定义故事 每次有人尝试发布它时都会有一个新图像 现在我创建了一个对象 以及将两者结合起来的动作和故事 我想要实现的是一个看起来像这样的故事https fbcdn dragon a akamaihd net hphotos
  • 如何使用 TypeScript、Jest 和 Enzyme 测试 React 中的按钮点击

    我正在使用 TypeScript 构建一个 React Native 应用程序 我正在使用 Jest 和 Enzyme 进行组件测试 我也在使用 React 导航 我正在努力编写单击按钮的单元测试 这是组件的代码 只是渲染函数 render
  • 如何翻转 Twitter Bootstrap 的工具提示

    我正在使用 Twitter 的 Bootstrap 来实现工具提示 目前 工具提示显示在链接上方 我希望工具提示出现在链接下方 我该怎么做呢 我正在触发工具提示 它明确指出 底部 但它不想为我工作 tooltip tooltip place
  • 是否可以进行条件解构或有后备?

    我有一个具有许多深层嵌套属性的对象 我希望能够访问 MY KEY 上的属性 如下 但如果该属性不存在 则获取 MY OTHER KEY 我怎样才能做到这一点 const X Y MY KEY Values segments segment
  • jQuery 选择器定位具有 id AND class 的元素不起作用

    我有以下事件处理函数 jQuery document on click button submitb function e alert jQuery 包含在 html 文档中 但是 如果我点击 div class submitb Go di
  • Intro.js 2页然后返回首页

    我在用intro js http introjs com 为我的网站创建一个小介绍 我希望游览从第 1 页 主页 2 另一页 然后回到第 1 页 主页 我已经成功地从第 1 2 页开始 但不确定如何让它返回到第 1 页 我对 javascr
  • React Native Android 无法连接到 WebSocket

    尽管 Web 实现可以工作 但 android 模拟器以及我的设备无法连接到 WebSocket 在引发错误的地方收到以下事件错误代码 然后断开连接 connection error Event isTrusted false messag
  • Gmail 和 Google Chrome 12+ 中的“从剪贴板粘贴图像”功能如何工作?

    我注意到一个来自 Google 的博文 http gmailblog blogspot com 2011 06 pasting images into messages just got html其中提到 如果您使用的是最新版本的 Chro
  • 移动浏览器中的 React 性能

    我有一个组件 表 其中包含许多行 其中包含数据编辑 其掩码形式为contenteditable 可以选择所有字段并同时更改所有行 在桌面上它运行得相当快 但在 iPhone 6 上我有不真实的滞后 Safari 每次操作都会挂起 20 秒
  • Angular 停止 Enter 键提交

    I am trying to stop the Enter from submitting my button and rather make it point to another function I tried trapping th
  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr
  • 什么是 TinyMCE jQuery 包?

    我被要求在项目中使用 TinyMCE 编辑器 在下载页面上 有一个主包 然后是一个 jQuery 包 This package contains special jQuery build of TinyMCE and a jQuery in
  • 在firefox上用js改变表单方法

    我需要使用 javascript jQuery 或纯 更改表单的方法属性 我的表单有 method post 我尝试用以下方法更改它 submit button click function var url input id url val
  • 如何解决此错误“不要使用对象作为类型”?

    我不明白这个错误消息造成的 我的组件有两个和一个包含对象的数据数组 我收到一条错误消息 不要使用object作为一种类型 这object类型目前很难使用 我该如何解决它 我附加了数组包含对象的数据 first tsx import data
  • 使用 javascript/jquery 从数据库格式化日期的正确方法

    我正在调用包含日期时间数据类型的数据库 日期看起来像这样 2005 05 23 16 06 00 000 当用户从列表中选择某个项目时 我想在表格中显示它 我调用我的控制器操作并返回所有时间的 Json 并将它们放入表中 问题是日期完全错误
  • 如何调试 Node.js 应用程序?

    如何调试 Node js 服务器应用程序 现在我主要使用警报调试打印语句如下 sys puts sys inspect someVariable 一定有更好的调试方法 我知道谷歌浏览器 http en wikipedia org wiki
  • 错误:模块“html”不提供视图引擎(Express)

    我正在尝试设置一个简单的路由应用程序 但在渲染页面时不断遇到错误 Error Module html does not provide a view engine 奇怪的是我已经在 app js 文件中指定了视图引擎 但仍然收到错误 app

随机推荐