JavaScript 中的生成器与迭代器：异步编程的另一种思路

想象一个典型场景：你需要从某个 API 逐页拉取数据，直到没有更多内容。用传统的 Promise 链，你可能会写一个递归函数，或者用一个 while 循环配合 await。代码结构虽然可行，但“翻页”的逻辑（比如维护 page 变量、判断 hasMore）和“数据处理”的逻辑耦合在一起。如果中间需要暂停、恢复，或者处理错误，代码会迅速变得臃肿。

这时，生成器（Generator）和迭代器（Iterator）提供了一种“拉”模型的思路。消费者（比如一个 for 循环）可以按需请求下一个值，而生产者（生成器函数）只在被请求时才执行并产出数据。这种控制流的反转，让异步数据流的组织变得异常清晰。

理解基石：同步迭代器与生成器

在讨论异步之前，必须夯实同步部分的基础。一个迭代器就是一个实现了 next() 方法的对象，每次调用返回 { value, done } 结构。数组的遍历就是基于迭代器。

// 一个自定义的简单范围迭代器
function makeRangeIterator(start, end, step = 1) {
    let nextIndex = start;
    let iterationCount = 0;
    return {
        next() {
            if (nextIndex < end) {
                const result = { value: nextIndex, done: false };
                nextIndex += step;
                iterationCount++;
                return result;
            }
            return { value: iterationCount, done: true };
        }
    };
}
// 使用迭代器
const it = makeRangeIterator(1, 5);
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
// ... 直到 done 为 true

手动维护迭代器状态（如 nextIndex）很繁琐。生成器函数（function*）正是为此而生。它允许你用一个看似连续的函数来定义迭代算法，状态由引擎自动保存。

function* makeRangeGenerator(start, end, step = 1) {
    for (let i = start; i < end; i += step) {
        yield i; // 在此暂停，返回当前i的值
    }
}
const gen = makeRangeGenerator(1, 5);
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }

yield 关键字是生成器的核心。它暂停函数执行，并将后面的值返回给调用者。下次调用 next()，函数从上次暂停处继续。这使得生成器天然适合表示序列，甚至是无限序列（如斐波那契数列）。

步入异步：当生成器遇上 async/await

同步生成器处理不了异步值。如果你在生成器里 yield fetch(url)，得到的是一个 Promise 对象，而不是解析后的响应。我们需要一个能自动等待 Promise 的机制。

这就是异步生成器（async function*）和for await...of 循环登场的时候。在函数前加上 async，它就变成了异步生成器。此时，yield 后面可以跟任何值（包括 Promise），而消费者使用 for await...of 循环时，引擎会自动等待每个被 yield 的值兑现。

async function* asyncPaginationGenerator(baseUrl) {
    let page = 1;
    let hasMore = true;
    while (hasMore) {
        // yield 一个 Promise
        const response = yield fetch(`${baseUrl}?page=${page}`);
        const data = await response; // 注意：这里await的是外部通过next()传入的值，更常见的做法是直接 yield await fetch(...)
        if (data.items.length === 0) {
            hasMore = false;
        } else {
            yield* data.items; // 使用 yield* 委托迭代 data.items 数组
            page++;
        }
    }
}
// 更常见且清晰的写法是：
async function* asyncPaginationGeneratorSimple(baseUrl) {
    let page = 1;
    while (true) {
        const response = await fetch(`${baseUrl}?page=${page}`);
        const data = await response.json();
        if (data.items.length === 0) return;
        for (const item of data.items) {
            yield item; // 逐个产出数据项
        }
        page++;
    }
}

消费这个异步生成器变得极其简洁：

// 使用 for await...of 消费异步序列
(async () => {
    const itemGen = asyncPaginationGeneratorSimple('/api/data');
    for await (const item of itemGen) {
        console.log('Processing item:', item);
        // 处理每个项目，循环会自动等待下一项就绪
    }
    console.log('All pages processed.');
})();

关键优势在于：异步逻辑被封装在生成器内部（翻页、请求、判断结束），消费代码只关心数据本身。这实现了关切的分离。

核心优势与适用场景对比

异步生成器并非要取代所有 Promise，而是在特定场景下提供更优解。下面通过一个表格对比不同异步处理方式：

从上表可以看出，异步生成器的甜蜜点在于处理有序的、序列化的异步数据流。它把复杂的流程控制（暂停、继续、结束判断）从消费者代码中抽离，让主逻辑保持简洁。

实际场景：Node.js 中的流式日志处理

假设你有一个服务器在持续写入日志文件，你需要实时读取并处理新增行。用 fs.createReadStream 配合异步生成器可以优雅地实现：

import { createReadStream } from 'fs';
import { createInterface } from 'readline';

async function* followLogFile(filePath) {
    const stream = createReadStream(filePath, { encoding: 'utf8' });
    const rl = createInterface({ input: stream, crlfDelay: Infinity });

    for await (const line of rl) {
        yield line; // 每产生一行新日志，就暂停并产出
    }
    // 流结束（如文件被轮转），生成器自然结束
}

// 消费日志
(async () => {
    const logLines = followLogFile('/var/log/app.log');
    for await (const line of logLines) {
        if (line.includes('ERROR')) {
            console.error('Found error:', line);
            // 可以在这里轻松地 break 来停止监听
            // break;
        }
    }
})();

这段代码的可读性很高，for await... 循环清晰地表达了“对每一行日志进行处理”的意图，而暂停、恢复、结束都由底层的流和生成器协议处理。

需要注意的“坑”与边界情况

尽管强大，异步生成器也有其局限性和使用注意事项：

• 错误处理：生成器内部的 try...catch 可以捕获单次 yield 前的异常。如果消费者想从外部取消或抛出错误，可以使用生成器对象的 throw() 方法。这提供了双向通信的可能。
• 单次消费：一个生成器对象通常只能被迭代一次。迭代完成后，再次调用 next() 或使用循环会得到 { done: true }。如果需要重新迭代，必须重新调用生成器函数创建一个新对象。
• 性能考量：对于超高性能、极低延迟的场景，生成器带来的微小开销（创建生成器对象、上下文切换）可能需要评估。但对于大多数 I/O 密集型应用（如网络请求、文件读写），这点开销可忽略不计。
• 浏览器兼容性：异步迭代协议（for await...of, async function*）在现代浏览器（Chrome, Firefox, Safari, Edge）中已得到良好支持，但在需要支持非常老旧环境（如 IE）的项目中无法直接使用。

总结：一种思维模式的补充

JavaScript 的生成器与迭代器，特别是其异步形态，为我们提供了一种不同于传统回调或 Promise 链的异步编程思路。它本质上是一种声明式的、拉取式的数据流抽象。

当你面临的问题可以建模为一个“需要按顺序逐个消费的异步项目序列”时，就应该考虑异步生成器。它能把胶水代码（状态管理、流程控制）封装起来，让业务逻辑重归简洁。它不是银弹，不会解决所有异步问题，但在处理分页、流、实时消息等场景时，它能显著提升代码的可读性和可维护性。

下次当你写下一个 while 循环配合 await 来翻页时，不妨停下来想想：这个逻辑是否足够独立，以至于可以封装成一个 async function*？让生成器帮你记住页码，而你，只需要关心数据本身。