javascript - 等待嵌套异步调用完成

Question

我有一系列嵌套的异步调用需要在我的代码继续之前完成。函数 save_part1 调用 sqlite 数据库并返回感兴趣的行。对于每一行，我都会进行 ajax 调用以远程保存它们。

从我读到的有关 Promise 和 Deferred 的内容来看，我只看到它们在 ajax 调用的上下文中使用。最重要的是，它让我的大脑受伤。

问题:如何等到所有 ajax 调用完成后再启动 save_part2？

function save()
{ 
    save_part1();
    //this should only happen after all the ajax calls from save_part1 are complete
    save_part2();
}
function save_part1()
{
    db.transaction(function (tx) {
        tx.executeSql("SELECT * FROM TABLE1", [],
            function (transaction, results) {
                for (var i = 0; i < results.rows.length; i++)
                {
                    var row = results.rows.item(i);

                    ajaxCall_item1(row);

                }
            }, errorHandler)
    });
}

function save_part2()
{
    db.transaction(function (tx) {
        tx.executeSql("SELECT * FROM TABLE2", [],
            function (transaction, results) {
                for (var i = 0; i < results.rows.length; i++)
                {
                    var row = results.rows.item(i);

                    ajaxCall_item2(row);

                }
            }, errorHandler)
    });
}

Answer 1

只要你有 ajaxCall_item 返回 jQuery 延迟对象，你就可以让 save_part1 返回一个延迟对象，将返回的 Promise 收集到一个数组中，用 $.when 调用它们code> 并在所有请求完成后解析“promise”。然后您将能够编写:save_part1().then(save_part2);。这是一个未经测试的示例:

function save() { 
    save_part1().then(save_part2).fail(function(err) {
      // ohno
    });
}

function ajaxCall_item1(row) {
  return $.ajax({ ... });
}

function save_part1()
{
  var dfd = jQuery.Deferred();
  var promises = [];
  db.transaction(function (tx) {
    tx.executeSql("SELECT * FROM TABLE1", [],
      function (transaction, results) {
        for (var i = 0; i < results.rows.length; i++) {
            var row = results.rows.item(i);
            promises.push(ajaxCall_item1(row));
        }

        $.when.apply($, promises).then(function() {
          dfd.resolve.apply(dfd, arguments);
        });
      }, function(err) {
        dfd.reject(err);
      });
  });
  return dfd;
}