各位靓仔靓女们，早上好/下午好/晚上好！欢迎来到今天的“JavaScript内核与高级编程”特别讲座！今天我们要聊点刺激的，那就是“Async Iterator”和“Async Generator”，它们能帮你像处理同步数据一样，优雅地处理异步流数据。准备好了吗？让我们开始吧！
第一部分：异步世界的挑战
先想想，我们在JavaScript里经常遇到哪些异步操作？
- 网络请求： 从服务器获取数据。
- 文件读取： 从磁盘读取数据。
- 数据库查询： 从数据库获取数据。
- 事件监听： 监听用户交互或系统事件。
这些操作，通常不会立即完成，而是需要一段时间。传统的同步迭代器（Iterator）在这种情况下就显得力不从心了。因为同步迭代器期望next()方法立即返回结果，而异步操作需要等待。
举个栗子，想象一下，你要从一个巨大的日志文件里逐行读取数据，然后进行分析。如果用同步迭代器，读取操作会阻塞主线程，导致页面卡死，用户体验极差！
第二部分：Async Iterator闪亮登场
为了解决这个问题，ES2018引入了Async Iterator。它允许我们以异步的方式逐个获取数据，而不会阻塞主线程。
Async Iterator的定义：
Async Iterator是一个对象，它必须提供一个名为next()的方法。这个next()方法返回一个Promise，Promise resolve的值是一个对象，包含value和done两个属性。
value：迭代器返回的值。done：一个布尔值，表示迭代是否完成。true表示迭代完成，false表示还有更多数据。
代码示例：一个简单的Async Iterator
class MyAsyncIterator {
constructor(data) {
this.data = data;
this.index = 0;
}
async next() {
if (this.index < this.data.length) {
// 模拟异步操作，比如网络请求
await new Promise(resolve => setTimeout(resolve, 500));
return { value: this.data[this.index++], done: false };
} else {
return { value: undefined, done: true };
}
}
}
// 使用Async Iterator
async function main() {
const data = [1, 2, 3, 4, 5];
const iterator = new MyAsyncIterator(data);
let result = await iterator.next();
while (!result.done) {
console.log(result.value);
result = await iterator.next();
}
console.log("迭代完成！");
}
main(); // 输出：1 2 3 4 5 （每隔500ms输出一个数字）在这个例子中，MyAsyncIterator模拟了一个异步数据源。每次调用next()方法，都会等待500毫秒，模拟一个网络请求或文件读取的操作。
第三部分：Async Generator拯救世界
虽然Async Iterator已经很强大了，但是手动实现一个Async Iterator类还是比较繁琐。这时候，Async Generator就派上用场了！
Async Generator的定义：
Async Generator是一种特殊的函数，它使用async function*语法定义。在Async Generator函数中，可以使用yield关键字暂停函数的执行，并返回一个Promise，Promise resolve的值就是yield后面的表达式。
代码示例：用Async Generator简化代码
async function* myAsyncGenerator(data) {
for (const item of data) {
// 模拟异步操作
await new Promise(resolve => setTimeout(resolve, 500));
yield item;
}
}
// 使用Async Generator
async function main() {
const data = [1, 2, 3, 4, 5];
const generator = myAsyncGenerator(data);
let result = await generator.next();
while (!result.done) {
console.log(result.value);
result = await generator.next();
}
console.log("迭代完成！");
}
main(); // 输出：1 2 3 4 5 （每隔500ms输出一个数字）可以看到，使用Async Generator，代码变得更加简洁明了。yield关键字让我们可以像写同步代码一样，处理异步数据流。
第四部分：for await...of循环：终极武器
有了Async Iterator和Async Generator，我们还需要一个方便的循环结构来遍历它们。for await...of循环就是为此而生的。
for await...of循环的语法：
for await (const variable of iterable) {
// 循环体
}variable：每次迭代返回的值。iterable：一个Async Iterator或Async Generator。
代码示例：用for await...of循环简化代码
async function* myAsyncGenerator(data) {
for (const item of data) {
// 模拟异步操作
await new Promise(resolve => setTimeout(resolve, 500));
yield item;
}
}
// 使用for await...of循环
async function main() {
const data = [1, 2, 3, 4, 5];
const generator = myAsyncGenerator(data);
for await (const item of generator) {
console.log(item);
}
console.log("迭代完成！");
}
main(); // 输出：1 2 3 4 5 （每隔500ms输出一个数字）for await...of循环让我们可以像使用for...of循环一样，遍历异步数据流，代码更加简洁易懂。
第五部分：实际应用场景
Async Iterator和Async Generator在实际开发中有很多应用场景，比如：
- 读取大型文件： 可以逐行读取大型文件，避免一次性加载到内存中。
const fs = require('fs');
const readline = require('readline');
async function* readLines(filePath) {
const fileStream = fs.createReadStream(filePath);
const rl = readline.createInterface({
input: fileStream,
crlfDelay: Infinity // Recognize all instances of CR LF as a single line break.
});
for await (const line of rl) {
yield line;
}
}
async function main() {
const filePath = 'large_file.txt'; // 替换为你的文件路径
for await (const line of readLines(filePath)) {
console.log(`Line: ${line}`);
// 对每一行进行处理
}
console.log("文件读取完成！");
}
main();- 处理WebSocket消息： 可以监听WebSocket连接，并逐个处理接收到的消息。
const WebSocket = require('ws');
async function* webSocketMessages(url) {
const ws = new WebSocket(url);
return new Promise((resolve, reject) => {
ws.on('open', () => {
console.log('Connected to WebSocket');
});
ws.on('message', (message) => {
yield message;
});
ws.on('close', () => {
console.log('Disconnected from WebSocket');
resolve(); // 迭代完成
});
ws.on('error', (error) => {
console.error('WebSocket error:', error);
reject(error);
});
});
}
async function main() {
const wsURL = 'wss://echo.websocket.events'; // 一个免费的WebSocket echo服务
try {
const messages = webSocketMessages(wsURL);
for await (const message of messages) {
console.log(`Received message: ${message}`);
// 处理接收到的消息
}
} catch (error) {
console.error("Error during WebSocket communication:", error);
}
console.log("WebSocket connection closed.");
}
main();- 分页获取数据： 可以从服务器分页获取数据，避免一次性加载所有数据。
async function* fetchPaginatedData(url, pageSize = 10) {
let page = 1;
let hasMore = true;
while (hasMore) {
const response = await fetch(`${url}?page=${page}&pageSize=${pageSize}`);
const data = await response.json();
if (data.length === 0) {
hasMore = false;
break;
}
for (const item of data) {
yield item;
}
page++;
}
}
async function main() {
const dataURL = 'https://jsonplaceholder.typicode.com/todos'; // 一个免费的API
for await (const item of fetchPaginatedData(dataURL, 5)) {
console.log(`Item: ${item.title}`);
// 处理每一个数据项
}
console.log("数据获取完成！");
}
main();- 实时数据流处理： 可以处理来自传感器、股票市场等实时数据流。
第六部分：Async Iterator vs. Observable
你可能会问，Async Iterator和Observable有什么区别？它们都是用来处理异步数据流的，但是它们的设计理念不同。
| 特性 | Async Iterator | Observable |
|---|---|---|
| 推送方式 | Pull（拉取） | Push（推送） |
| 消费方式 | 按需消费，只有调用next()才会获取数据 |
主动推送，一旦订阅就会接收数据 |
| 取消订阅 | 无法取消，必须等到迭代完成 | 可以取消订阅，停止接收数据 |
| 适用场景 | 数据量大，不需要实时更新的场景 | 数据量小，需要实时更新的场景 |
| 错误处理 | 使用try...catch捕获异步错误 |
使用Observable.error()方法发送错误 |
| 完成通知 | 通过done: true表示迭代完成 |
使用Observable.complete()方法发送完成通知 |
简单来说，Async Iterator是“按需取货”，Observable是“送货上门”。选择哪个取决于你的具体需求。
第七部分：注意事项
- 兼容性： Async Iterator和Async Generator是ES2018的新特性，需要较新的浏览器或Node.js版本支持。
- 错误处理： 在异步操作中，一定要注意错误处理，可以使用
try...catch语句捕获异步错误。 - 性能优化： 在处理大量数据时，要注意性能优化，避免过度使用异步操作。
第八部分：总结
Async Iterator和Async Generator是处理异步流数据的利器，它们让我们可以像处理同步数据一样，优雅地处理异步数据。掌握它们，可以让你写出更加简洁、高效、可维护的代码。
希望今天的讲座对你有所帮助！记住，编程的道路永无止境，要不断学习，不断进步！下次再见！