ES8 中的 async generators 和 iterators 提供了方便的处理异步数据流的方法。在前端开发中，这种技术可以用于处理图形界面上的事件响应，网络数据传输等方面。本文将从技术细节、优点和实际应用三个方面来深入探讨。
技术细节
async generators 是指使用 async/await 构造的生成器函数，它可以方便地处理异步数据流，例如网络数据传输，动画等。generator 函数具有一个运行控制权，可以暂停执行并在下一次调用时继续执行。async generators 与其类似，但它可以使用 async/await 来处理异步数据流。
async generators 往往被用来处理服务器端接收到的响应数据，这些数据是异步的并且顺序无法确定。因此，需要使用 Iterator 来处理这些数据。Iterator 是一种特别的对象，具有一个 next 方法，负责提供循环过程以及当前元素的值。使用 Iterator 可以遍历异步数据的每个元素。
优点
使用 async generators 和 iterators 的优点在于其异步性、可迭代性、可控制性和扩展性。
首先，异步性使得处理异步数据变得方便。传统的数据处理方式无法处理异步数据的流程。其次，可迭代性使得数据流处理变得更为灵活，我们可以使用 Iterator 来处理不确定大小的数据流。那么，可控制性是指我们可以灵活地控制异步数据的传输和处理。我们可以利用 next 方法来控制数据的传输，同时可以控制函数的执行过程。最后，扩展性可以使得处理异步数据流的方式更为灵活。我们可以利用一个简单的生成器和一个 Iterator 来扩展数据流。
实际应用
下面给出一个具体的例子，说明如何使用 async generators 和 iterators 来处理异步数据。我们假设有一个服务器响应对象 response。本例中，我们使用 async generators 来封装一个将响应转化为字符串的函数。
async function * responseToString(response) {
const reader = response.body.getReader();
let chunk = await reader.read();
while (!chunk.done) {
yield new TextDecoder().decode(chunk.value);
chunk = await reader.read();
}
}在这个例子中，我们使用 response.body.getReader() 取得流数据，并使用 while 循环来循环流数据。取得 chunk 后我们使用 TextDecoder().decode(chunk.value) 将其转换为字符串，并使用 yield 关键字将其作为一个异步返回值返回。最后，我们可以通过迭代器来遍历数据流。
async function logResponse(response) {
for await (const data of responseToString(response)) {
console.log(data);
}
}在这个例子中，我们定义了一个简单的函数 logResponse，它接受一个 response 参数，然后使用 for-await-of 循环来遍历其异步返回值。
总结
在本文中，我们深入探讨了 ES8 中的 async generators 和 iterators 技术，其具有异步性、可迭代性、可控制性和扩展性等优点。同时，我们给出了一个具体的例子，说明如何使用它们来处理异步数据流。通过这些技术，我们可以方便地处理异步数据流，并使代码更为简洁和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4c03983d39b488182f559