javascript - 这些异步/等待代码之间有区别吗？

Question

我正在阅读有关 async/await 用法和最佳实践的文章，有人在评论中建议这段代码:

const makeRequest = async () => {
    const value1 = await promise1()
    const value2 = await promise2()

    return promise3(value1, value2)
}

可以这样写:

const makeRequest = async () => {
    const value1 = promise1()
    const value2 = promise2()

    return promise3(await value1, await value2)
}

这些是一样的吗？如果不是，那有什么区别？

Answer 1

它们是不同的。最大的区别是第一个示例必须等待 promise1 完成，然后才能尝试 promise2。

在第一个示例中，流程如下所示:

1. 调用 promise1

2. 等待promise1完成并存入value1

3. 调用 promise2

4. 等待promise2完成并存入value2

在第二个示例中，流程如下所示:

1. 调用 promise1

2. 调用 promise2

3. 等待 promise1 和 promise2 完成

在第二个示例中，可以同时调用 promise1 和 promise2，这样 promise2 就不必等待 promise1 完成。

这可能看起来的另一种方式是使用 Promise.all

例如:

const makeRequest = async () => {
    const [value1, value2] = await Promise.all([promise1(), promise2()])
    return promise3(value1, value2)
}

Promise.all 将启动两个 promise 并等待它们全部完成后再返回:Promise.all docs

promise 值然后按照 promise 在 promise 数组中的顺序放入数组中。使用destructuring ，我们可以从内联值数组中取回这些值。