随着互联网的快速发展，我们现在常常需要与服务器进行长时间的通讯，获得实时更新。但是很多时候，服务器端还没有足够的数据进行响应，我们需要不断地轮询服务器，等到数据准备好之后再进行响应。
在过去，这种方式需要使用回调函数和定时器来完成。但是在 ES9 中，新增了异步迭代器，它可以帮助我们轻松地实现不断轮询的功能。
什么是异步迭代器？
异步迭代器是一种新的迭代器类型，允许我们在异步任务中进行迭代操作。前面的异步任务必须完成，才能取得下一个值。它可以通过 for-await-of 循环进行使用。
异步迭代器的使用
为了使用异步迭代器，我们需要创建一个 Symbol.asyncIterator 的迭代器。
-- -------------------- ---- -------
----- --------- - ----- -- -- -
-- ---- ----- ---- -------- ----
-
-- ------ -- ----- --------
----- ------------- - -
----- ------------------------- -
----- ------ -
----- ---- - ----- ------------
-- ------- ------
----- -----
-
-
-接下来，我们可以使用 for-await-of 循环来遍历这个异步迭代器。
for await (let data of asyncIterable) {
console.log(data);
}在这个例子中，fetchData 函数会无限期地从服务器获取数据，并且当数据到达时通过 yield 关键字返回数据。当 for-await-of 循环被调用时，它会自动等待 fetchData 函数完成，然后获取从 yield 返回的数据。
在长连接服务中使用异步迭代器
让我们将这个例子应用到一个实际的场景中，我们需要在本地中维护一个到服务器的长连接。当新的数据到达时，服务器会在服务器上触发一个事件。为了获取这些新的数据，我们需要不断地轮询服务器。
在 ES9 中，可以使用异步迭代器来完成长连接轮询的任务。接下来，我们将创建一个示例的 WebSocket 客户端，用于演示如何在长连接中使用异步迭代器。
假设我们的 WebSocket 客户端代码如下：
-- -------------------- ---- -------
----- --------- - --------------
----- -- - --- ---------------------------------
------------- -- -- -
-------------------------
---
---------------- ------ -- -
------------------ -- ------
---我们可以使用异步迭代器来轮询服务，代码如下：
-- -------------------- ---- -------
---
- ------ -- ----- -------- ---- ------- --- --- -------- ---- - --------- ------
- --- ------ ---- --------
--
----- ---------------------------- - ---- -- --
----- ------------------------- -
----- ------ -
----- - ------ ---- - - ----- --- ----------------- -- -
------------------ ------ -- -
--------- ------ ----- ----- ----- ---
---
---
-- ------ ------
----- ------
-
-
---
---
- --- --- --------- ----- -------- -- ------ --- --- ---------
--
----- ------ - ----- -- -- -
--- ----- ---- ---- -- --------------------------------- -
------------------
-
--
---------在这个例子中，我们创建了一个 createWebSocketAsyncIterable 函数，它返回一个异步迭代器，用于从 WebSocket 服务器获取消息。createWebSocketAsyncIterable 函数监听 WebSocket 的 message 事件，然后返回一个 Promise，以便在消息到达时解决。通过 yield 关键字，createWebSocketAsyncIterable 函数可以暂停相应的迭代器，并且在下一次迭代中继续。
接下来，我们使用 for-await-of 循环迭代 createWebSocketAsyncIterable 函数。当新的数据被接收时，for-await-of 循环会自动调用 createWebSocketAsyncIterable 函数，以便在下一个消息到达时恢复迭代。
结论
异步迭代器是一项非常强大的功能，可以简化异步迭代操作的编码方式。它使开发人员能够轻松地进行长连接轮询，而不必使用复杂的回调函数和计时器。
使用 ES9 的异步迭代器是一种非常好的编码方式。它使开发人员能够使用简单的代码来完成复杂的异步任务。如果你还没有使用异步迭代器，那么现在就是时候去试试了！
示例代码
完整代码示例可以在以下链接中找到：GitHub 示例代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675251c78bd460d3ad92dbbd