ECMAScript 2019 (ES10)：JS 中的 Promise.all 时序问题

在 JavaScript 中，Promise.all 是一个非常常用的函数，其可以将多个 Promise 对象一起执行，并在它们都执行完毕后，以数组的形式返回它们的返回值。在 ECMAScript 2019 (ES10) 中，对 Promise.all 进行了一些改进，其中包括一个重要的时序问题，下面我们来详细了解一下。

Promise.all 的基础用法

在进行讲解之前，我们先简单了解一下 Promise.all 的基本用法和语法：

Promise.all(iterable);

其中 iterable 是一个可迭代对象，通常是一个数组，但也可以是一个 Set 对象、Map 对象等等。Promise.all 方法会返回一个 Promise 对象，当 iterable 中所有 Promise 对象都 resolve 后，这个 Promise 对象才会 resolve，且 resolve 返回值是一个由 iterable 中所有 Promise resolve 返回值组成的数组。

举个例子，下面代码中，Promise.all 方法会等数组 promises 中的三个 Promise 对象都 resolve 后，将它们的返回值以数组的形式返回。

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);
const promises = [p1, p2, p3];

Promise.all(promises).then(result => {
  console.log(result); //[1, 2, 3]
});

Promise.all 的时序问题

我们知道，Promise.all 方法并不一定按照被传入的顺序执行每个 Promise 对象。换句话说，在某些情况下，Promise.all 中后面的 Promise 对象可能会比前面的 Promise 对象更早 resolve，这是由异步任务的执行顺序决定的。

在 ECMAScript 2019 (ES10) 中，对这个时序问题进行了修正，具体来说，就是添加了一个 for await...of 语法，用于按照 iterable 中的顺序依次迭代异步任务的执行结果，保证了其时序正确。

为了更加详细的介绍这个语法，我们先看一个示例代码：

-- -------------------- ---- -------
----- ----- - -- -- --- --------------- -- ------------------- -----

----- -------- ----------- -
  ----- --- - ------ -- -----
  ----- -------- - ---------------
  ----- ------- - ---

  --- ----- ------ ------ -- --------- -
    --------------------
  -

  --------------------- ------------- ---------- ----------
-

------------

在这个示例代码中，我们定义了一个 delay 函数，它会等待一定时间后返回一个 Promise 对象。接下来，我们定义了一个 asyncFunc 函数，其中 arr 数组中分别有 1000ms、0ms 和 500ms 的延迟，我们通过 map 将其转换为 Promise 对象，并存储在 promises 数组中。最后，我们通过 for await...of 遍历了 promises 数组，将执行结果放入 results 数组中，并打印出来。

运行代码后，我们可以看到打印结果是 [undefined, undefined, undefined]，这是因为这些 Promise 对象并没有返回值。但是，我们可以清晰的看到 for await...of 语法对异步任务的执行顺序进行了保证，1000ms 的任务最先执行，然后是 0ms 的任务，最后是 500ms 的任务。

需要强调的是，for await...of 语法仅能保证异步任务的执行顺序，但不能保证异步任务的执行时序。比如，如果上面的代码中将 delay 函数中的 setTimeout 改为 setImmediate，那么 for await...of 就不能保证异步任务的执行顺序了。

指导意义

Promise.all 时序问题的修复为我们提供了一种更安全，更可靠的方式来处理异步任务，特别是在管理并发连接和资源时，非常实用。使用 for await...of 可以保证通过 Promise.all 返回的数组中异步操作执行结果的顺序与输入 iterable 中保持一致。

不过，需要注意的是，这个新特性只支持异步语句（Async functions 或 generator 函数）中使用，且需要在协议级别支持 async iterable，因此需要在现代浏览器和 Node.js 版本中使用，建议配合 --harmony-async-iteration 标志启动。

总结

在 ECMAScript 2019 (ES10) 中，为 Promise.all 增加了一个 for await...of 语法，用于按照 iterable 中的顺序依次迭代异步任务的执行结果。这个新特性提高了异步任务并行化和并发处理的效率和可靠性，特别是在管理并发连接和资源时，非常实用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64c1039b83d39b488155ea66