react-native-sqlite-storage 中的 React Native Async Await

Posted 2023-02-22

【中文标题】react-native-sqlite-storage 中的 React Native Async Await

【英文标题】：React Native Async Await in react-native-sqlite-storage

【发布时间】：2017-10-31 02:07:58

【问题描述】：

我对 React native 并不陌生。在开始之前，我已经阅读了很多教程。我正在尝试在我的应用中创建可以在需要时通过应用的屏幕访问的商店。

这是我的文件结构。

index.ios.js /app/index.js /app/store/database.js /app/store/userStore.js

index.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

从“反应”导入反应； 从'./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 文件从数据库中检索用户。当我试图从数据库中获取用户时，我想暂停代码的执行，所以我尝试使用 async/await。

如果您可以在代码中看到我使用 console.log() 来检查执行是暂停还是继续。没有任何 async/await 在任何文件中工作。 在所有 console.log 完成后，我得到了响应。

我想等到收到来自数据库的数据。请给一些专家建议，我哪里出错了。提前致谢。

【问题讨论】：

我的同样问题***.com/questions/51927120/…

【参考方案1】：

你需要将它包装在一个 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);

      );
    );
  );

【讨论】：

我对 sqlite 有一些问题，我创建了 insert fetch delete 函数，但由于某种原因它对我不起作用。你能帮我吗？

【参考方案2】：

let  SQLite = require('react-native-sqlite-storage');
const  DB = SQLite.openDatabase(name:'test.db',createFromLocation:'~sqlitedb.db');

class Database
    db;
    constructor(db)
        this.db =db;
    
    executeSql = (sql,params=[])=>new Promise((resolve , reject)=>
        this.db.transaction((trans)=>
            trans.executeSql(sql,params,(db,results)=>

                resolve(results);
            ,
            (error)=>
                reject(error);
            );
        );
    );


export default  (new Database(DB));

使用

 import Database from 'database';

 try
 
   results = await DB.excuteSql("SQL",['params']);
 
 catch(e)
 

 

【讨论】：

似乎是我正在寻找的东西，但如果我尝试你的方法，我会得到：“意外的保留字'await'”

【参考方案3】：

以下内容对我有用：

import  openDatabase  from 'react-native-sqlite-storage'

const db = openDatabase(
  name: 'app.db',
  location: 'default',
)

export default function App() 
  useEffect(() => 
    db.then((db) => 
      db.transaction((tx) => 
        tx.executeSql('SELECT this from that', [])
    )
  )
  /* Rest of the component... */

openDatabase 返回一个 Promise，在解析时我们得到实际的 db，我们可以在其上运行 db.transaction()。

您也可以使用 async/await 语法，但这需要大量封装，因此.then() 总是更简洁。

这与 "expo-sqlite" 包不同，因为db = openDatabase('app.db') 不会在那里返回 Promise。相反，您可以直接运行db.transaction()。