Wait for promises from a for loop

问题:

The following code does not really do what I want.

function doIt () {
  return new Promise (function (resolve, reject) {
    var promises = [];
    db.transaction(function(tx1){
      tx1.executeSql(function(tx2, rs) {
        for (var i = i; i < N; i++) {
          promises.push(db.transaction(function(tx3){
            ...
          }));
        }
      });
    });
    Promise.all(promises).then(resolve);
  });
}

Now it does not work, because Promise.all() gets executed, before all promises are in the array, at least I think that's correct.

Is there a elegant way to guarantee that all these promises are finished, before doIt ends?

回答1:

You can just move where the Promise.all() is located so that it's right AFTER the for loop has finished populating the array:

function doIt () {
  return new Promise (function (resolve, reject) {
    var promises = [];
    db.transaction(function(tx1){
      tx1.executeSql(function(tx2, rs) {
        for (var i = i; i < N; i++) {
          promises.push(db.transaction(function(tx3){
            ...
          }));
        }
        Promise.all(promises).then(resolve);
      });
    });

  });
}

FYI, mixing promises and callbacks can be confusing and makes consistent error handling particularly difficult. Does tx1.executeSql() already return a promise? If so, you can do something cleaner using only promises that are already created by your database functions like this:

function doIt() {
    return db.transaction.then(function(tx1) {
        return tx1.executeSql().then(function(tx2, rs) {
            var promises = [];
            for (var i = i; i < N; i++) {
                promises.push(db.transaction().then(function(tx3) {
                    ...
                }));
            }
            return Promise.all(promises).then(resolve);
        });
    });
}

This returns promises from .then() handlers to auto-chain promises together.