JavaScript - 异步迭代

你好，未来的JavaScript魔法师们！今天，我们将踏上一段激动人心的旅程，探索异步迭代的世界。别担心，这些词听起来可能有点吓人——但在本课结束时，你将能够自信地像专业人士一样使用这些强大的概念。那么，让我们开始吧！

异步迭代

什么是异步迭代？

想象一下你在一个繁忙的咖啡店里。你下了订单，但不是在柜台等待，而是坐下来和朋友聊天，同时你的咖啡正在准备。这在编程中基本上就是异步操作——你开始一个任务，然后在进行其他事情时等待它完成。

异步迭代将这个概念进一步发展。就像如果你点了多杯咖啡，每一杯准备好了就会端给你，而不需要你一直去柜台查看。

在JavaScript中，异步迭代允许我们以一种自然且顺序的方式处理异步数据源，即使操作是在后台进行的。

理解异步操作

在我们深入异步迭代之前，让我们先理解JavaScript中的异步操作。

Promises：构建块

Promises是异步JavaScript中的基本概念。它们代表了一个可能还不可用但将在未来的某个时刻解决的价值。

这里有一个简单的例子：

let coffeePromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("你的咖啡准备好了！");
}, 2000);
});

coffeePromise.then((message) => {
console.log(message);
});

在这个例子中，coffeePromise模拟了制作咖啡的过程。2秒后（模拟煮咖啡的时间），它解决了一个消息。then方法用于处理已解决的promise。

Async/Await：Promises的语法糖

async/await语法使得处理promises更加容易。它允许你编写看起来和行为上都像同步代码的异步代码。

async function getCoffee() {
let message = await new Promise((resolve) => {
setTimeout(() => {
resolve("你的咖啡准备好了！");
}, 2000);
});
console.log(message);
}

getCoffee();

这段代码和前面的例子做同样的事情，但是它的写法更容易阅读和理解。

使用 'for await...of' 循环

现在我们理解了异步操作，让我们看看如何使用for await...of循环来迭代它们。

基本语法

for await...of循环的基本语法如下：

async function example() {
for await (let value of asyncIterable) {
console.log(value);
}
}

实际例子

假设我们有一个异步函数模拟获取咖啡订单：

async function* coffeeOrders() {
yield await Promise.resolve("浓缩咖啡");
yield await Promise.resolve("拿铁");
yield await Promise.resolve("卡布奇诺");
}

async function serveCoffee() {
for await (let coffee of coffeeOrders()) {
console.log(`服务：${coffee}`);
}
}

serveCoffee();

在这个例子中，coffeeOrders是一个异步生成器函数，它产出了咖啡订单。serveCoffee函数使用for await...of循环来迭代这些订单，并在它们准备好时服务它们。

实际应用场景

异步迭代在处理数据流或需要分块处理的大量数据时特别有用。

读取大文件

想象一下你需要逐行读取一个非常大的文件：

const fs = require('fs').promises;

async function* readLines(file) {
const fileHandle = await fs.open(file, 'r');
const stream = fileHandle.createReadStream();
let buffer = '';

for await (const chunk of stream) {
buffer += chunk;
let lineEnd;
while ((lineEnd = buffer.indexOf('\n')) !== -1) {
yield buffer.slice(0, lineEnd);
buffer = buffer.slice(lineEnd + 1);
}
}

if (buffer.length > 0) {
yield buffer;
}

await fileHandle.close();
}

async function processFile() {
for await (const line of readLines('largefile.txt')) {
console.log(`处理行：${line}`);
}
}

processFile();

这个例子演示了如何使用异步迭代逐行处理大文件，而不需要一次性将整个文件加载到内存中。

获取分页API数据

另一个常见的用例是从API获取分页数据：

async function* fetchPages(url) {
let nextUrl = url;
while (nextUrl) {
const response = await fetch(nextUrl);
const data = await response.json();
yield data.items;
nextUrl = data.next;
}
}

async function processAllPages() {
for await (const page of fetchPages('https://api.example.com/data')) {
for (const item of page) {
console.log(`处理项目：${item.name}`);
}
}
}

processAllPages();

这个例子展示了如何使用异步迭代来获取和处理API的分页数据，每次处理一个页面。

结论

异步迭代是JavaScript中一个强大的工具，它允许我们以清晰和直观的方式处理异步数据源。这在处理数据流或需要分块处理的大数据集时尤其有用。

记住，掌握异步迭代的关键是练习。不要害怕在你的项目中尝试这些概念。在你意识到之前，你将能够像一个真正的JavaScript忍者一样处理异步操作！

方法	描述
for await...of	用于迭代异步可迭代对象
async function*	定义一个异步生成器函数
yield	在生成器函数中定义要迭代的值
Promise.resolve()	创建一个解决为给定值的promise
async/await	用于处理promise的语法，看起来更像是同步代码

快乐编码，愿你的异步操作总能成功解决！

Credits: Image by storyset