javascript - 如何确保一堆异步函数调用仅在另一堆异步函数调用完成之后才发生？

Question

我是 JavaScript 新手，我认为我想要做的事情可以使用 Promises 来解决，但在阅读 Mozilla 文档后，我无法弄清楚如何实现这一目标。

让我演示一下我想要通过以下代码实现的目标。

// file demo.js
function async_print(message, seconds)
{
    setTimeout(function () {
        console.log(message, '(' + seconds + ' s)')
    }, seconds * 1000);
}

// First execute the following three asynchronously
async_print('foo', 1)
async_print('foo', 2)
async_print('foo', 3)

// Then execute the following three asynchronously
async_print('bar', 1)
async_print('bar', 2)
async_print('bar', 3)

// Then execute the following three asynchronously
async_print('baz', 1)
async_print('baz', 2)
async_print('baz', 3)

我得到以下输出。

$ node demo.js 
foo (1 s)
bar (1 s)
baz (1 s)
foo (2 s)
bar (2 s)
baz (2 s)
foo (3 s)
bar (3 s)
baz (3 s)

此外，请参阅此处的 JSFiddle:http://jsfiddle.net/3kdwy46r/

我的意图被记录为代码中的注释。我希望首先执行所有“foo”语句。 “bar”语句只能在“foo”语句完成后执行。 “baz”语句只能在“bar”语句完成后执行。这意味着输出应该如下所示。

foo (1 s)
foo (2 s)
foo (3 s)
bar (1 s)
bar (2 s)
bar (3 s)
baz (1 s)
baz (2 s)
baz (3 s)

这是可以在 JavaScript 或 Node 中方便地完成而不依赖第三方库的事情吗？例如，JavaScript Promise 可以在这里提供帮助吗？我知道我可能必须修改 async_print 函数签名或将其包装在其他内容中，以便传递可以调用以指示函数完成的回调。我对这样的修改很满意。我基本上需要知道如何完成这样的工作。

您能否提供执行此操作的完整代码示例，以便我可以使用它来学习如何在 JavaScript 中执行此类操作？

Answer 1

这是最适合 promise 的东西，Promise.all()并 promise 链接。以下是您可以在现代浏览器中运行以查看输出的代码片段:

    // return a promise from this async function that is resolved when done 
    function async_print(message, seconds) {
        return new Promise(function(resolve) {
            setTimeout(function () {
                resolve();
            }, seconds * 1000);
        }).then(function() {
            log(message, '(' + seconds + ' s)')
        });
    }
    
    Promise.all([async_print('foo', 1), async_print('foo', 2), async_print('foo', 3)]).then(function() {
       return Promise.all([async_print('bar', 1), async_print('bar', 2), async_print('bar', 3)]);
    }).then(function() {
       return Promise.all([async_print('baz', 1), async_print('baz', 2), async_print('baz', 3)]);
    }).then(function() {
        // everything done here
    });

    function log(x,y) {
        var div = document.createElement("div");
        div.innerHTML = x;
        if (arguments.length > 1) {
            div.innerHTML += y;
        }
        document.body.appendChild(div);
    }

总体思路是:

1. 你改变async_print()因此它返回一个 promise ，该 promise 在异步操作完成时得到解决。
2. 您使用Promise.all()告诉你当一群async_print()声明已全部完成。
3. 您使用.then()来自 Promise.all() 的处理程序触发下一组操作(当所有前面的操作完成后)。
4. 您返回下一个 Promise.all()以便将它们链接在一起，以便各组按顺序发生。