异步迭代器是 ES2020 中新增的一个特性，它可以让我们以异步的方式按顺序迭代数据集合。这个特性对于处理需要大量异步操作的数据集合非常有帮助，尤其是在前端开发中，处理异步数据集合是一件非常常见的任务。
什么是异步迭代器
首先我们需要了解什么是迭代器。在 ES6 中，我们可以使用迭代器来遍历基于数组、Map 或 Set 数据集合的元素。例如：
const arr = [1, 2, 3]
const iter = arr[Symbol.iterator]()
console.log(iter.next()) // { value: 1, done: false }
console.log(iter.next()) // { value: 2, done: false }
console.log(iter.next()) // { value: 3, done: false }
console.log(iter.next()) // { value: undefined, done: true }在 ES2020 中，异步迭代器是一种特殊的迭代器，它返回的是一个 Promise，这个 Promise 会在下一次迭代完成后 resolve 并返回相应的值。这种方式可以很好地处理需要进行异步操作的数据集合。
如何使用异步迭代器
使用异步迭代器需要遵守一些规则，具体如下：
- 使用
Symbol.asyncIterator符号来定义异步迭代器。
-- -------------------- ---- -------
----- ------------- -
----- - ------------------------ -
----- -
----- -
----- -
-
-
----- -- - --- ---------------
----- ------ - --------------------------
----------------- -------------- -- - ------ -- ----- ----- -
----------------- -------------- -- - ------ -- ----- ----- -
----------------- -------------- -- - ------ -- ----- ----- -
----------------- -------------- -- - ------ ---------- ----- ---- -yield语句需要使用await，因为它返回的是 Promise。
-- -------------------- ---- ------- ----- -------- - ---------------- - ----- ----- ------------------ ----- ----- ------------------ ----- ----- ------------------ - ----- --------- - ---------------- ----------------- ----------------- -- - ------ -- ----- ----- - ----------------- ----------------- -- - ------ -- ----- ----- - ----------------- ----------------- -- - ------ -- ----- ----- - ----------------- ----------------- -- - ------ ---------- ----- ---- -
- 在使用异步迭代器时，需要使用
for await...of循环。这个循环可以遍历异步迭代器返回的所有值。
-- -------------------- ---- ------- ----- -------- - ---------------- - ----- ----- ------------------ ----- ----- ------------------ ----- ----- ------------------ - ----- --------- - ---------------- --- ----- ------ ----- -- ---------- - ------------------ - -- - - -
更多示例
使用异步迭代器读取文件内容
-- -------------------- ---- -------
----- -------- - -------------------
----- -- - -------------
----- -------- - ------------------- -
----- -- - --------------------------
------ -----------------------------
--
--- ----- ------ ---- -- --- -
----- ----
-
-
----- -------- --------------------- -
--- ----- ------ ---- -- -------------------- -
-----------------
-
-
--------------------------使用异步迭代器请求后端 API
-- -------------------- ---- -------
----- -------- - ---------- -
--- ---- - -
----- ------ -
----- -------- - ----- --------------------------------------------------
----- ---- - ----- ---------------
-- ------------ --- -- -
-----
-
----- ----
------
-
-
----- -------- ------------ -
--- ----- ------ ---- -- ----------- -
-----------------
-
-
------------总结
异步迭代器是 ES2020 中的一个新特性，它可以让我们以异步的方式按顺序迭代数据集合。使用异步迭代器需要遵守一些规则，并使用 for await...of 循环来遍历返回的所有值。该特性非常适合于处理需要大量异步操作的数据集合，尤其是在前端开发中，很多情况下我们需要处理异步的 API 返回数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455e6d6968c7c53b0941246