Блог

У меня есть компонент, в котором мне нужно выполнить пару запросов один за другим. Я использовал обещание, но, похоже, оно не работает / я не могу этого сделать. Вот моя часть моего компонента:

 export default function AuthWrapper() {
    useEffect(() => {
        // creating app_tokens table if not exist
        console.log('before first query');
        new Promise((resolve) => {
            db.transaction(function (txn) {
                txn.executeSql(
                    "SELECT name FROM sqlite_master WHERE type='table' AND name='app_tokens'",
                    [],
                    function (tx, res) {
                        console.log('first query executed');
                        resolve(res);
                    },
                    function(error) {
                        console.log(error);
                    }
                );
            });
        });

        console.log('before second query');
        // creating users table
        new Promise((resolve) => {
            db.transaction(function (txn) {
                txn.executeSql(
                    "SELECT name FROM sqlite_master WHERE type='table' AND name='users'",
                    [],
                    function (tx, res) {
                        console.log('second query executed');
                        resolve(res);
                    },
                    function(error) {
                        console.log(error);
                    }
                );
            });
        });

        console.log('before third query');
        // creating institute_details table
        new Promise((resolve) => {
            db.transaction(function (txn) {
                txn.executeSql(
                    "SELECT name FROM sqlite_master WHERE type='table' AND name='institute_details'",
                    [],
                    function (tx, res) {
                        console.log('third query executed');
                        resolve(res);
                    },
                    function(error) {
                        console.log(error);
                    }
                );
            });
        });
    }, []);
}
 

Когда я запускаю этот журнал кода, он отображается следующим образом:

 before first query
before second query
before third query

first query executed
second query executed
third query executed
 

Но это должно быть так:

 before first query
first query executed

before second query
second query executed

before third query
third query executed
 

Кто-нибудь может мне помочь, чего мне не хватает!

К вашему сведению: я использую

 "react": "16.11.0",
"react-native": "0.62.2",
"react-native-sqlite-storage": "^5.0.0",
 

Вы спрашиваете это неправильно, вы хотите, чтобы это было синхронно, как я, посмотрев на желаемый результат.

Для этого существует async — await .

Я не знаю, почему вы использовали promise, но, да, с кодом, который у вас есть прямо сейчас, вы можете сделать что-то вроде этого,

 const myFirstFunction = () => {
  return new Promise((resolve) => {
    db.transaction(function (txn) {
      txn.executeSql(
        "SELECT name FROM sqlite_master WHERE type='table' AND name='app_tokens'",[],
        function (tx, res) {
          console.log('first query executed');
          resolve(res);
        },
        function (error) {
          console.log(error);
        },
      );
    });
  });
};

const mainFunction = async () => {
  console.log('before first query');
  await myFirstFunction();
  // ... similarlly create and call other functions here
  // ... creating different methods will be easy to maintain
};

useEffect(() => {
  mainFunction();
}, []);