在前端开发中，异步操作是非常常见的。它们通常基于 Promise 或 async/await 等技术实现。然而，当需要异步地处理多个迭代器时，使用 Promise 和 async/await 始终会带来额外的复杂性和代码冗余。幸运的是，ES8 中推出了新的语言特性 for await...of，它可以方便地处理这种情况。
for await...of 的介绍
ES8 中的 for await...of 语句可以遍历异步迭代器，即实现了 Symbol.asyncIterator 方法的对象。在异步迭代器中，next() 方法返回一个 Promise，该 Promise 在最终完成后将包含迭代器返回的值和标志表示迭代是否完成。这种迭代方式是非阻塞和异步的，不会阻塞主线程。
下面是一个简单的迭代器示例：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
----- --- --------------- -- ------------------- -------
------ - ------ ---- ----- ----- --
-
------ - ----- ---- --
-
--
-
--遍历该异步迭代器的传统方式通常是：
const doSomething = async () => {
for await (const value of asyncIterable) {
console.log(value);
}
}for await...of 可以让迭代更加简洁和易于阅读。以下是使用 for await...of 的相同代码的实现：
const doSomething = async () => {
const iterator = asyncIterable[Symbol.asyncIterator]();
while(true) {
const { value, done } = await iterator.next();
if (done) break;
console.log(value);
}
}我们可以看到，使用 for await...of 只需要一行代码，而不是 while 循环的多个行。
优化异步操作
使用 for await...of 有几个优点:
- 代码更加简洁易读
使用 for await...of 它是广泛用于异步编程的最佳选择。使用它取代了传统的方式，可以使代码不仅变得更加简洁易读，还有助于降低错误处理的错误。
- 解决了 Promise.all 的限制
使用 for await...of 可以解决 Promise.all 的限制。由于 Promise.all 会并发并行运行，因此如果一个 Promise 返回一个超大的数据量，它可能会对性能造成问题。for await...of 可以将数据逐个传递，从而减轻并发压力。
- 可以应对大数据流
使用 for await...of 可以应对大流的异步迭代器。当处理大量数据时，我们不需要等到所有数据全部加载完毕后再开始处理。for await...of 可以帮助我们将数据流分成多个部分，然后立即进行处理。这种方法可以提高整个处理过程的效率。
示例代码
下面是示例代码，演示了如何使用 for await...of 遍历异步迭代器：
-- -------------------- ---- -------
----- ------------ - ----- -- -- -
--- ---------- - --
----- ----------- -- -- -
----- -------- - ----- ---------------------------------------------------
----- ---- - ----- ----------------
----- -----
-------------
-
--
----- --------- - ----- -- -- -
--- ----- ------ ---- -- --------------- -
----------------- -- -------------------
-
--
------------在上面的示例代码中，我们定义了一个名为 fetchFromAPI() 的异步迭代器，用于从 API 获取数据。我们定一个循环，该循环将逐个加载页面并返回页面内容。最后，我们遍历数据，并将它们输出到控制台。在通过 for await...of 遍历异步迭代器时，我们异步地处理了数据，而不必等待所有的页面都加载完毕。
结论
在 ES8 中，for await...of 是一种新的语法，用于处理异步迭代器的迭代循环。使用 for await...of 的主要优点是可以使我们的代码更加简洁和易于阅读，解决了 Promise.all 的限制，并且非常适用于处理大量数据的异步操作。因此，在编写 JavaScript 异步代码时，请考虑使用 for await...of。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efc0bc6fbf96019730bd0d