javascript - 使用 promises 串联运行异步函数

Question

我正在尝试使用 promises 连续运行多个异步任务。每个任务都应在前一个任务完成后立即运行。这是我尝试过的简化示例:

var order = [];
var tasks = [
    new Promise(resolve => {
        order.push(1);
        setTimeout(() => {
            order.push(2)
            resolve();
        }, 100);
    }),
    new Promise(resolve => {
        order.push(3);
        setTimeout(() => {
            order.push(4)
            resolve();
        }, 100);
    }),
    new Promise(resolve => {
        order.push(5);
        resolve();
    })
];

tasks.reduce((cur, next) => cur.then(next), Promise.resolve()).then(() => {
    console.log(order); // [ 1, 3, 5 ]
});
setTimeout(() => console.log(order), 200); // [ 1, 3, 5, 2, 4 ]

我希望 order 在回调函数中等于 [ 1, 2, 3, 4, 5 ]。但是我得到了那些奇怪的结果([ 1, 3, 5 ] 在 then 回调和 [ 1, 3, 5, 2, 4 ]在延迟功能中)。我错过了什么？

Answer 1

当你写类似

的东西时

new Promise(resolve => {
    order.push(1);
    setTimeout(() => {
        order.push(2)
        resolve();
    }, 100);
});

它立即执行，这意味着它立即运行，并在 0.1 秒内解决。
将它写在数组中并不重要，函数仍在现在运行，并且 promise 作为数组中的值返回。

换句话说，所有三个 promise 调用并行运行，它们都立即运行，相隔仅几毫秒，并在内部计时器中的给定时间解决，从现在开始!

如果你想一个接一个地运行 promise，它们必须以某种方式被包装，这样它们就不会现在运行，而是在它们被调用时运行，例如类似

var tasks = [
    _ => new Promise(resolve => {
            order.push(1);
            setTimeout(() => {
                order.push(2)
                resolve();
            }, 100);
    }),
    _ => new Promise(resolve => {
            order.push(3);
            setTimeout(() => {
                order.push(4)
                resolve();
            }, 100);
    }),
    _ => new Promise(resolve => {
            order.push(5);
            resolve();
    }),
];

(下划线是匿名箭头函数的有效 ES2015 简写)

其中每个数组值都是一个可以调用的匿名函数，当被调用时，promise 构造函数运行并返回 promise。

要串行递归调用函数，递归函数调用是最简单的，在当前完成时调用下一个函数等。

(function iterate(i) {
    tasks[i]().then(() => {          // when done
        if (tasks[++i]) iterate(i);  // call the next one
    });
})(0);

FIDDLE

---

编辑:

你也可以Array.reduce你已经在做的方式，现在你有返回 promise 的函数

tasks.reduce((cur, next) => cur.then(next), Promise.resolve()).then(() => {
    // all done, chain is complete !
});