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("Espresso");
yield await Promise.resolve("Latte");
yield await Promise.resolve("Cappuccino");
}

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