在前端开发中，我们经常需要处理异步操作，比如 Ajax 请求、Promise 等等。ES6 中引入了迭代器（Iterator）和生成器（Generator）的概念，可以方便地处理数据序列的迭代。而在 ES10 中，又新增了异步迭代器（Async Iterator）的概念，可以更加方便地处理异步操作，同时可以实现生成期限事件处理。
异步迭代器的介绍
异步迭代器是一种新的概念，是为了处理类似 Promise 的异步操作而设计的。与普通迭代器相比，异步迭代器需要返回一个 Promise 对象，并在 Promise 对象 resolve 后才会进行下一次迭代。这样就可以处理异步操作，确保每一次异步操作都执行完成后再进行下一次操作。
异步迭代器的写法与普通迭代器类似，只需要在函数名前面加上 async 关键字，并在返回值前加上 await 关键字即可。
const asyncIterable = {
async *[Symbol.asyncIterator]() {
yield await new Promise(resolve => setTimeout(() => resolve(1), 1000));
yield await new Promise(resolve => setTimeout(() => resolve(2), 2000));
yield await new Promise(resolve => setTimeout(() => resolve(3), 3000));
}
};上面的代码定义了一个异步迭代器，返回了三个 Promise 对象，分别延迟 1 秒、2 秒、3 秒后 resolve 输出 1、2、3。
异步迭代器的遍历
与普通迭代器相比，异步迭代器在遍历时需要使用 for await...of 语法，这样可以确保每一次迭代都完成后再进行下一次迭代。
(async function() {
for await (let value of asyncIterable) {
console.log(value);
}
})();上面的代码使用 for await...of 遍历了 asyncIterable，输出了 1、2、3。注意，for await...of 语法必须在 async 函数中使用。
异步迭代器的生成期限事件处理
异步迭代器的另一个优点是可以方便地实现生成期限事件处理，也就是在某个时间段内生成事件，如果时间到了仍没有生成事件，就抛出一个 error。
下面是一个示例代码，生成了一个 5 秒钟的期限时间，在 5 秒钟内随机生成 5 个数。如果 5 秒钟内没有生成 5 个数，就会抛出 error。
-- -------------------- ---- -------
----- ------------------------- - -
----- ------------------------- -
--- ----- - --
----- ------ - -- -
--- ----- - ------------------------ - ------
--- ----- - ----- --- --------------- -- ------------- -- ----------------- --------
-- ------ - ---- -
----- --- ------------ -- --- --------
-
----- ------
-
-
--
------ ---------- -
--- -
--- ----- ---- ----- -- -------------------------- -
-------------------
-
- -------- -
-----------------------
-
-----上面的代码定义了一个异步迭代器 asyncIterableWithDeadline，使用了一个 while 循环来生成 5 个数，每个数的延迟时间是 0 到 1 秒之间的随机数。如果延迟时间大于 700 毫秒，就抛出一个 error。
在遍历异步迭代器时，使用了 try...catch 语法来捕获 error，并输出 error 的 message。
结论
异步迭代器是 ES10 中一个非常有用的特性，可以帮助我们更加方便地处理异步操作，同时还可以实现生成期限事件处理。在实际开发中，我们可以结合异步迭代器和 Promise，实现更加灵活和高效的异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ffbac81b0bf82c71cf0768