Javascript 在异步循环结束时执行

Question

我对 Javascript 中的异步代码感到很糟糕，并且已经被困在某些事情上有一段时间了。

我正在使用 WebSql，只是执行数据库初始化步骤，但其中一个循环没有按照我期望的方式执行。

$(document).ready(function() {
    initdatabase();
});

function initdatabase() {

    var db = window.openDatabase("nothing", "1.0", "nothing", 2 * 1024 * 1024);

    db.transaction(function(trans) {

        trans.executeSql("CREATE TABLE", [], function(trans, result) {
            // success
            defaultdata(db);
        }, function(error) {
            // failed
        });

    });

}

function defaultdata(db) {

    db.transaction(function(trans) {

        var lo_data = [
        {code:"CODE01", desc:"Code 01 Desc"},
        {code:"CODE02", desc:"Code 02 Desc"},
        {code:"CODE03", desc:"Code 03 Desc"}
        ];

        for(i = 0; i < lo_data.length; i++) {

            trans.executeSql("INSERT", [lo_data[i].code, lo_data[i].desc], function(trans, result) {
                // success
                console.log("INS : " + i);
            }, function(error) {
                // failed
            });

        }

        console.log("END");

    });

}

但是指示结束的日志是在 for 循环完成之前执行的。如果我尝试验证数据是否已插入，我总是会失败，因为循环尚未完成插入。

Google 表示异步代码应该使用 Promise 来处理，但我找不到在这样的实例中使用 Promise 的示例。

任何帮助将不胜感激

Answer 1

将每个回调转换为promise，然后使用Promise.all

    const loDataPromises = lo_data.map(({ code, desc }) => {
      return new Promise((resolve, reject) => {
        trans.executeSql(
          "INSERT",
          [code, desc],
          function(trans, result) {
            console.log('success');
            resolve();
          },
          function(error) {
            console.log('failed');
            reject();
          }
        );
      });
    });

    Promise.all(loDataPromises)
      .then(() => {
        console.log('all done');
      });