理解.then() ES6

Question

我在代码中遇到了一个错误，困扰了我很长一段时间，我想要得到一些澄清。

在这段代码中，注释掉的内部承诺导致了问题。在结束时，Promise.all()在setTimeout一命中就会继续，而不是在超时内的解析之后。

用承诺包装异步代码可以解决流程问题，但为什么会这样呢？

本质上，为什么我们不能在.then()链中运行正常的异步代码，在异步回调结束时返回一个Promise.resolve()？

var asyncPromise = function() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log('Async Promise done');
            resolve();
        }, 1000);
    });
};

var generateSignupPromises = function(qty) {
    var promiseArray = [];
    for (var i = 1; i <= qty; i++) {
        promiseArray.push(
            function() {
                return asyncPromise()
                .then(function() {
                    console.log('Before Timeout');

                  //Uncommenting this fixes the issue
                  //return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            console.log('After Timeout');
                            //resolve();
                            return Promise.resolve();
                        }, 500);
                  //})
                });
            }
        );
    }
    return promiseArray;
};

var test = generateSignupPromises(1);

Promise.all([test[0]()])
.then(function() {
    console.log('Done');
});

链接到正在运行的代码：http://www.es6fiddle.net/imfdtuxc/

Answer 1

为什么我们不能在.then()链中运行正常的异步代码，在异步回调结束时返回一个Promise.resolve()？

你完全可以。但是任何价值--不管是承诺还是什么--普通异步回调中的return都会像往常一样被忽略。

在then回调中启动异步操作对此没有什么改变，setTimeout只是不返回承诺--而且then不会知道它可能等待的任何异步事件。

如果您想从回调中返回一个承诺，并为最终结果获得另一个承诺，则必须是一个then回调：

asyncPromise()
.then(function() {
    return new Promise(function(resolve, reject) {
//  ^^^^^^
        setTimeout(resolve, 500);
    }).then(function() {
//     ^^^^^^^^^^^^^^^
        return Promise.resolve();
    });
});

Answer 2

然后是一个同步函数，所以如果你想在里面执行异步任务，你必须返回一个承诺。

而且，Promise.all期望得到一系列的承诺。不是数组的数组。

var asyncPromise = function() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      console.log('Async Promise done');
      resolve();
    }, 1000);
  });
};

var generateSignupPromises = function(qty) {
  var promiseArray = [];
  for (var i = 1; i <= qty; i++) {
    promiseArray.push(
      function() {
        return asyncPromise()
        .then(function() {
          console.log('Before Timeout');

          //Uncommenting this fixes the issue
          return new Promise(function(resolve, reject) {
          setTimeout(function() {
            console.log('After Timeout');
            resolve();
            //return Promise.resolve();
          }, 500);
          })
        });
      }
    );
  }
  return promiseArray;
};

var test = generateSignupPromises(1);

Promise.all([test[0]()])
.then(function() {
  console.log('Done');
});

http://www.es6fiddle.net/imfe2sze/