在 ES2018 中，新增了一个用于异步遍历的语法结构——for-await-of，它可以帮助我们更加便捷地处理异步数据，本文将详细介绍其用法和常见应用场景。
一、for-await-of 的用法
for-await-of 与 for-of 语法结构非常相似，只是它适用于异步数据的遍历。其基本语法如下：
for await (variable of asyncIterable) { // code block to be executed }
其中，asyncIterable 是一个异步可迭代对象，可以是任何实现了异步迭代器接口的对象，variable 则是用于接收每一项数据的变量。
接下来我们通过一个示例来演示 for-await-of 的用法：
-- -------------------- ---- ------- -- ------- ----- ------------- - - ------------------------ - --- ----- - -- ------ - ----- ------ - -- -------- - -- - ----- --- --------------- -- ------------------- ------- ------ - ----- ------ ------ ----- -- - ---- - ------ - ----- ---- -- - - - - -- -- ---- ------ ---------- - --- ----- ------ ---- -- -------------- - ------------------ - -----展开代码
上面的代码中，我们创建了一个异步可迭代对象 asyncIterable，实现了异步迭代器接口，并使用 for-await-of 对其进行遍历。由于异步可迭代对象中的 next() 方法返回的是 Promise，因此我们使用 await 关键字等待 Promise 的结果。最终输出结果为：
1 2 3 4 5
二、for-await-of 的应用场景
for-await-of 可以用于处理多个异步操作的并行计算、流式数据处理等场景，以下是几个常见的应用场景。
1. 并行计算
假设我们需要同时执行多个异步操作，并在所有操作完成后统一处理结果，我们可以使用 Promise.all() 方法来实现。但是如果这些异步操作的数据源不同，我们就无法统一使用 Promise.all() 来处理。这时，我们可以使用 for-await-of 来同时处理多个异步操作的数据，示例代码如下：
-- -------------------- ---- ------- ----- -------- ----------------- - ----- -------------- - -------------------------- -- -------- ----- -------------- - -------------------------- -- -------- --- --------- - --- --- ----- ------ ----- -- --------------- - --- ----- ------ ----- -- --------------- - ----- ------ - ------------------ ------- -- ------------ ----------------------- - - ------ ----------------------- -- ------ -展开代码
上面的代码中，我们使用 for-await-of 双重循环遍历两个异步数据源的数据，并将处理后的结果存入数组中，最终使用 Promise.all() 方法对结果进行统一处理。
2. 流式数据处理
在处理文件、网络请求等数据流时，我们通常需要使用到流式处理。例如，我们需要读取一个大文件，并对其中的每一行数据进行处理，我们的代码可能如下所示：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- -- - -------------- ----- -- - -------------------------- ------ ------------------------------------- ---------- -------- --- ------------- ------ -- - ----------------- ---- ----- ---------- ---展开代码
上面的代码中，我们使用 readline 模块读取文件，并且通过监听 line 事件实现对每一行数据的处理。但是如果我们需要在处理每一行数据时，同时向网络请求数据，并在所有网络请求完成后统一处理结果，我们就可以使用 for-await-of 实现。示例代码如下：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ----- - ----------------- ----- -- - -------------- ----- -- - -------------------------- ------ ------------------------------------- ---------- -------- --- ----- -------- ----------------- - ------ --- ----------------- ------- -- - -------------- ----- -- - --- ---- - --- -------------- ------- -- - ---- -- ------ --- ------------- -- -- - -------------- --- -------------- ----- -- - ------------ --- --- - ------ ---------- - --- ----- ------ ---- -- --- - ----- ------- - ----- ---------------------------------------- --------------------- ------------- - -----展开代码
在上面的代码中，我们使用了 for-await-of 循环遍历文件的每一行，并在每一行数据处理时向网络请求数据，最终将所有请求结果统一打印输出。
三、结语
总的来说，for-await-of 是 ES2018 中非常实用的一项新功能，可以帮助我们更好地处理异步数据，提高代码的可读性和可维护性。希望本文的介绍能够帮到大家，使大家能够更好地掌握该功能并应用于实际开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67807280ce7f4861253c0019
