ES8新增了一种循环迭代器:for-await-of,它是一个用于异步迭代的语法糖,用于遍历异步迭代器对象。
什么是异步迭代器
在循环迭代的时候,通常我们使用普通迭代器,用for...of
语句来实现循环。但在异步操作中,有些操作需要等待异步操作完成再进行下一步,那么就需要使用异步迭代器。
异步迭代器是一个返回Promise
对象的函数,它可以用来迭代异步的数据流。异步迭代器对象必须实现一个Symbol.asyncIterator()
方法,用于返回迭代器本身。
for-await-of 语句
ES8中新增了for-await-of
语句,用于遍历异步迭代器对象。它的语法和for...of
语句类似,只不过它可以遍历异步迭代器中的异步操作。
----- -------- --------- - --- --- - -------------------- ------------------- -------------------- --- ----- ---- ------ -- ---- - -------------------- - - ---------- -- -- -- - -- - -- -
在上述示例中,asyncFn
函数中的arr
数组中包含3个Promise
对象,它们会返回相应的结果:1、2、3。通过for-await-of
语句,我们对这个数组进行了遍历。let result
定义了一个变量result
,用于存放每个Promise
对象的结果。由于Promise
对象的结果是异步返回的,for-await-of
语句为我们处理了等待异步结果的逻辑,因此这样的结果可以很方便地输出。
如果使用for...of
语句进行遍历会发生什么呢?
----- -------- --------- - --- --- - -------------------- ------------------- -------------------- --- ---- ------ -- ---- - -------------------- - - ---------- -- -- -- ------- ----------- -- ------- ----------- -- ------- -----------
在上述示例中,for...of
语句拿到了Promise
对象,但是它并不知道如何处理异步结果,因此输出的是Promise
对象的状态。这就是for-await-of
语句的强大之处,它帮我们处理了异步结果的等待和返回。
示例代码
下面,我们来看一个使用for-await-of
语句的示例代码,它使用了fetch
来获取电影列表,获取电影列表的内容是异步的。
----- -------- ----------- - ----- --- - -------------------------------------------------------------------- ----- -------- - ----- ----------- -- -------------- - ----- --- ----------- ------ ------- --------------------- - ----- ---- - ----- ---------------- ------ ------------- - ----- -------- ---------------------- - ----- --- - ---------------------------------------------------------------------- ----- -------- - ----- ----------- -- -------------- - ----- --- ----------- ------ ------- --------------------- - ----- ---- - ----- ---------------- ------ - --- -------- ------ ----------- --------- -------------- ------------- ------------------ ------------- ------------------ ----------- ---------------- -- - ----- -------- ----------- - ----- ------ - ----- ------------ --- ----- ------ ----- -- ------- - ----- ------- - ----- ----------------------- --------------------------- - - ------------
在上述示例中,我们先定义了一个getMovies
函数,它通过fetch
获取电影列表,并返回Promise
对象。接着,我们定义了getMovieDetails
函数,它获取电影的详细信息,也返回了一个Promise
对象。最后,我们定义了logMovies
函数,它用for-await-of
语句遍历异步数组,分别获取每个电影的详细信息,并输出电影的标题。
这个示例展示了for-await-of
语句的强大之处,当我们遍历异步操作的时候,它为我们处理了异步等待的逻辑,使我们的代码更加简洁和易读。
总结
使用for-await-of
语句可以很方便地遍历异步操作,这样可以减少代码量,同时也使代码更加简洁和易读。当我们需要使用异步操作的时候,考虑使用异步迭代器和for-await-of
语句,这样可以提高代码的可读性和效率。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64fad9adf6b2d6eab31a5ac5