随着前端应用变得越来越复杂,异步编程(asynchronous programming)已成为非常重要的一部分,但在使用 Promise、async/await 等异步编程技术时也会遇到一些问题,例如 Promise.all() 和 Promise.race() 方法只处理 Promise 实例,而很难处理多个异步迭代器,此时 for-await-of 很好地解决了这个问题。
ES2018 推出的 for-await-of 允许我们处理异步可迭代对象(async iterable),它是在 for-of 循环基础上升级而来,可以在循环中使用 await 关键字来处理异步迭代器中的返回值,这极大地简化了代码语法,提高了可读性和可维护性。
什么是异步 Iterable?
在学习 for-await-of 之前,我们需要了解异步迭代器(async iterator),它是同时满足以下两个条件的迭代器:
- 它是一个迭代器,实现了 next() 方法,返回包含 value 和 done 属性的对象。
- 它指示下一个元素何时可用,即 next() 方法返回一个 Promise,而不是立即返回。
异步迭代器可以使用 Symbol.asyncIterator 方法来定义。以下是示例代码:
----- ------------- - - ------------------------ - --- - - -- ------ - ----- ------ - -- -- - -- - ----- --- --------------- -- ------------------- ------- ------ - ------ ---- ----- ----- -- - ------ - ----- ---- -- - -- - --
在上面的代码中,我们用 Symbol.asyncIterator 方法返回了一个迭代器对象,实现 next() 方法,并在每个执行周期之间等待 1 秒钟。
for-await-of 使用方法
与传统的 for-of 循环语法类似,for-await-of 提供了一种遍历异步迭代器的语法。以下是示例代码:
----- -------- ----- - --- ----- ---- ----- -- -------------- - ------------------- - - ------
在上面的代码中,使用 for-await-of 语句来遍历 asyncIterable。因为 asyncIterable 迭代器是异步的,所以我们使用了 async function 来包装整个 for-await-of 循环。使用 await 关键字使我们可以在每个完成的循环周期中访问 value 变量。
示例
让我们使用 for-await-of 迭代器来处理异步可迭代对象(异步 Generator)的实际案例。
假设我们有一个数组,其中每个元素都是一个 Promise 对象,而实际的值只能通过异步获取。如果我们要访问数组中的所有值,就需要等到所有 Promise 都完成,而且顺序不能错。
以下是示例代码:
----- -------- - - --- --------------- -- ------------- -- --------------- ------- --- --------------- -- ------------- -- --------------- ------- --- --------------- -- ------------- -- ----------------- ------ -- ----- -------- ----- - --- ----- ---- ----- -- --------- - ------------------- - - ------
在上面的代码中,我们创建了一个仅包含 Promise 对象的数组,并使用 for-await-of 语句来访问它们。每个 Promise 对象使用 setTimeout 模拟异步获取。使用 for-await-of 可以确保在所有 Promise 对象都被解决之前,不会访问打印值。
结论
使用 for-await-of 可以简化处理异步迭代器的代码语法,并使代码更具可读性和可维护性。在处理 Promise、异步 Generator 等异步可迭代对象时,for-await-of 可以轻松地帮助我们处理异步返回值,让代码更加清晰明了。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/66fd9c0344713626017fbbc3