ES12 中的 for-await-of 循环详解-JavaScript中文网-JavaScript教程资源分享门户

ES12 中的 for-await-of 循环详解

在 ES12 中，引入了 for-await-of 循环，以便更方便地处理异步迭代器。本文将详细介绍 for-await-of 循环的使用和特性。

异步迭代器和 Iterable/Iterator

在介绍 for-await-of 循环前，需要先理解异步迭代器和 Iterable/Iterator。

Iterable 和 Iterator 是 ES6 中引入的概念。Iterable 是支持迭代器协议的对象，可以使用 for...of 循环遍历。而 Iterator 是迭代器协议的实现，它定义了返回序列值的方法 next()。next() 方法返回对象，其中包含两个属性：value 和 done。当 done 的值为 true 时，表示序列已枚举完。

跟 Iterator 对应的是异步迭代器（AsyncIterator），它返回的是带有 Promise 的 next() 方法，其中 Promise 返回的是一个包含 value 和 done 属性的对象。异步迭代器本身也是一种 Iterable，可以使用 for await...of 循环枚举。

for-await-of 的基本用法

for-await-of 循环的语法跟 for...of 循环非常相似，代码如下：

----- -------- --- -
  ----- ------------- - -------------------
  --- ----- ------ - -- -------------- -
    ---------------
  -
-

可以看到，唯一的区别是在 for 关键词后面添加了 await。

for-await-of 可以与 Promise.all() 一起使用

for-await-of 循环还可以与 Promise.all() 一起使用，这样便可以同时处理多个异步操作。

----- -------- - ------------------- ------------------ -------------------
--- ----- ------ ------ -- ---------------------- -
  --------------------
-

for-await-of 可以处理迭代器的异常

以往，异步迭代器中遇到异常时只能使用 try-catch 来捕获异常。而 for-await-of 循环可以自动检测到异常，可以像处理同步代码一样处理异常。示例代码如下：

----- --------- ------------------------ -
  ----- --
  ----- --
  ----- --- ---------------
-

----- -------- --- -
  ----- ------------- - -------------------------
  --- -
    --- ----- ------ - -- -------------- -
      ---------------
    -
  - ----- --- -
    -----------------
  -
-

在上面的代码中，asyncIterableWithError() 会抛出一个错误。但由于 for-await-of 循环检测到异常并捕获，所以 catch 语句会被执行。

结论

通过本文的介绍，我们了解了 for-await-of 循环的基本使用方法和特性，以及它与 Promise.all() 的搭配使用、异常处理的能力。在实际开发中，for-await-of 循环可以帮助开发人员更方便地处理异步迭代器。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/66eed1a26fbf9601972ae5cf