随着 JavaScript 应用场景的不断扩大,异步编程已经成为了前端开发不可或缺的一部分。同时,ES6 中推出的迭代器和生成器也为异步编程带来了方便和可读性。但是,它们存在一个问题,就是无法处理异步操作。ES9 中新增加的 for await...of 循环和异步迭代器就为此提供了可行的解决方案。
异步迭代器
在 ES6 中,我们可以使用迭代器(iterator)扮演着数据源的角色,让我们能够对其进行遍历。例如,我们可以通过 for...of 循环,对数组进行依次遍历:
----- --- - --- -- --- --- ---- ---- -- ---- - ------------------ - -- -- -----
而对于异步方法的迭代,则不够方便。假设我们有一个异步函数 fetchItems(),它相当于获取一个异步数组,如何对它进行遍历访问呢?
----- -------- ------------ - ----- --- - --- -- --- ------ ---- - --- ---- ---- -- ------------- - ------------------ - -- -- ---------
上述代码并不能使用 for...of 对异步数组进行遍历。我们需要使用异步迭代器,它是一个实现了 Symbol.asyncIterator 方法的对象。该方法返回一个迭代器,该迭代器由 Symbol.asyncIterator 方法返回的 Promise 解析。对于异步迭代器的实现,我们可以使用 async 函数。
----- --------- ---------------- - ----- ------------------- ----- ------------------- ----- ------------------- - -------- -- - --- ----- ---- ---- -- ----------------- - ------------------ - ----- -- -- -----
对于异步迭代器的实现,非常具有灵活性。例如,我们可以根据业务需求决定每次迭代产生的 Promise 是否需要并行执行。
for await...of 循环
与 for...of 循环类似,ES9 新增的 for await...of 循环可以用于遍历异步迭代器。不同之处是,for await...of 循环提供了对异步操作的优雅处理方式。使用 for await...of 循环,可使得代码更加简洁易懂。
----- --------- ---------------- - ----- ----------- - -- -- ------------------------ - ------ ----- --- --------------- -- ------------------- ---------------- ----- ------------------- ----- --- --------------- -- ------------------- ---------------- ----- ------------------- ----- --- --------------- -- ------------------- ---------------- ----- ------------------- - -------- -- - --- ----- ---- ---- -- ----------------- - ------------------ - ----- -- -- -----
上述代码模拟了异步操作中的随机延迟,用 for await...of 循环遍历异步迭代器输出所有元素。
例子应用
简单的例子也很难展现 for await...of 和异步迭代器的优势。我们使用一个真实场景的代码,在解析 CSV 文件时用到了它们,来说明应用场景。
-- ------ ------ -- ---- ----- ------ - --- - ---- ----- ----- --------- ---------------------- -------- - ----- -------- - --------------------- -------- ----- ----------- -------- - -------------------- ----- ------- - --------------------- --- ---- --- -- ----- - -- ------------- - --------- - ----- ------ - --------------- ----- ---- - ----------------- - ------------------------- -------- - ------- -- ------ - ----- ------------------ ----- ----- - - - -------- -- - --- ----- ---- --- -- ---------------------------------- - ----------------- -------- - ----- ------ - --- ------------------------ ---- -- - -------------- - ------------ --- ------ ------- - --- - ----------------- - -----
上述代码使用了文件读入和解析 CSV 的操作,通过异步迭代器完成了所有操作,并配合 for await...of 循环输出了所有元素。由此可见,for await...of 循环和异步迭代器能够更加优雅地使用异步操作来处理一系列的操作。
总结
ES9 中引入了 for await...of 循环和异步迭代器,用于处理异步迭代器的问题。该机制使得异步操作的代码更加简洁、优雅。通过示例代码,我们也了解了这一特性的应用场景,并且能够发挥出它的优势,同时,在日常开发时使用 for await...of 循环和异步迭代器能够使得异步操作的代码更加自然、易读。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6468622c968c7c53b089c5d1