随着 JavaScript 愈发成熟，异步编程已经成为现代 JS 开发的必备技能。为了解决异步编程时的回调地狱、Promise 链和竞争条件等问题，ES6 引入了 async/await 语法，使得对于异步操作的处理变得更加优雅和简单。
不过在某些情况下，async/await 仍有一些局限，比如处理多个异步操作的集合时。在这种情况下，ES12 为我们提供了 for await...of 常见语法，它为异步操作提供了透明且流畅的处理方式。
for await...of 常见语法简介
for await...of 常见语法是 ES12 新增的异步迭代器语法，它允许我们在 for 循环中使用异步操作的集合。与普通的迭代器不同的是，异步迭代器可以暂停并等待下一个值返回。
下面是一段 for await...of 常见语法的示例代码，该代码演示了如何使用异步迭代器迭代异步生成器产生的值：
-- -------------------- ---- ------- ----- --------- ---------------- - ----- -- ----- -- ----- -- - ----- -------- ----------------------- - ----- ------------- - ----------------- --- ----- ------ ----- -- -------------- - ------------------- - - ------------------------ -- -- -- -- -展开代码
该示例代码定义了一个异步生成器 asyncGenerator，它使用 async function* 语法定义。函数的主体内使用 yield 语句返回 1、2、3 这三个值。
consumeAsyncGenerator 函数定义了一个异步迭代器 asyncIterable，并使用 for await...of 语法迭代 asyncGenerator 产生的异步值。每产生一个异步值，for 循环会迭代一次，并输出该值。
可以看到，异步迭代器的工作方式类似于普通的迭代器，但它是异步的，并且可以等待异步操作完成后继续迭代下一个值。
使用 for await...of 处理异步操作
除了用异步生成器产生异步值，for await...of 还可以用于处理异步操作的集合。下面是一个例子：
-- -------------------- ---- ------- ----- -------- --------------------- -------- - ------ --- ----------------- ------- -- - ------------- -- ---------- ------------------ --------- ------------------------ -------- -- - ----- -------- ------------------------- -------- - ----- -------- - ------------ -- --------------------- ---------- ----- --------- - --- --- ----- ------ -------- -- --------- - ------------------------- - ------ ---------- - -------------------------------------------------------------------- ----------------------------------------------- ------------------------------------------------ -------------------- -- ------------------------展开代码
该示例代码定义了一个带超时的 fetchWithTimeout 函数，它允许我们使用 Promise.race() 模式来限制请求在超时时间内完成。fetchWithTimeout 函数返回一个 Promise，可以在 then() 和 catch() 中处理成功和失败的情况。
fetchAllWithTimeout 函数使用 map() 方法将多个 fetchWithTimeout 函数强制转换为一个 Promise 数组。然后将这个数组用于 for await...of 循环，以便一次处理每个 URL 的响应数据。
由于 for await...of 常见语法返回的是异步值，我们可以通过简单地迭代来逐个收集异步响应。在本例中，我们将每个响应数据添加到 responses 数组中，并在最后以数组的形式返回结果。
总结
for await...of 常见语法是 ES12 中非常实用的异步操作处理方式。它可以帮助我们避免回调地狱和 Promise 链式调用的问题，同时让我们可以使用迭代器的方式处理异步操作的集合，提供透明且流畅的处理方式。
尽管 for await...of 常见语法仍处于实验阶段，但它已经被广泛支持并使用，并且在考虑处理异步集合时是很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0d994b5eee0b5257ddb2e
