如何使用 Generator 函数处理异步操作？

推荐答案

// www.javascriptcn.com code example
function* asyncGenerator() {
    const result1 = yield fetchData1();
    const result2 = yield fetchData2(result1);
    return result2;
}

function runGenerator(generator) {
    const iterator = generator();

    function handle(iteratorResult) {
        if (iteratorResult.done) {
            return Promise.resolve(iteratorResult.value);
        }

        return Promise.resolve(iteratorResult.value)
            .then(res => handle(iterator.next(res)))
            .catch(err => iterator.throw(err));
    }

    return handle(iterator.next());
}

runGenerator(asyncGenerator)
    .then(finalResult => {
        console.log('Final result:', finalResult);
    })
    .catch(err => {
        console.error('Error:', err);
    });

本题详细解读

Generator 函数的基本概念

Generator 函数是 ES6 引入的一种特殊函数，它可以通过 yield 关键字暂停函数的执行，并在需要时恢复执行。Generator 函数返回一个迭代器对象，通过调用迭代器的 next() 方法可以逐步执行函数体中的代码。

使用 Generator 处理异步操作

Generator 函数的一个重要应用场景是处理异步操作。通过 yield 关键字，我们可以将异步操作的结果返回给调用者，并在异步操作完成后继续执行后续代码。

1. 定义 Generator 函数

在 asyncGenerator 函数中，我们使用 yield 关键字来暂停函数的执行，并等待异步操作的结果。例如：

const result1 = yield fetchData1();

这里的 fetchData1() 是一个返回 Promise 的异步函数。yield 会将 Promise 返回给调用者，并在 Promise 解决后继续执行。

2. 实现 Generator 的运行器

为了执行 Generator 函数并处理异步操作，我们需要一个运行器函数 runGenerator。这个函数会递归地调用 Generator 的 next() 方法，并在每次 yield 返回的 Promise 解决后继续执行。

// www.javascriptcn.com code example
function runGenerator(generator) {
    const iterator = generator();

    function handle(iteratorResult) {
        if (iteratorResult.done) {
            return Promise.resolve(iteratorResult.value);
        }

        return Promise.resolve(iteratorResult.value)
            .then(res => handle(iterator.next(res)))
            .catch(err => iterator.throw(err));
    }

    return handle(iterator.next());
}

3. 处理异步结果

在 handle 函数中，我们首先检查迭代器是否已经完成（iteratorResult.done）。如果完成，则返回最终的结果。否则，我们将 yield 返回的 Promise 解决，并将结果传递给 iterator.next(res)，从而继续执行 Generator 函数。

如果异步操作失败，我们会通过 iterator.throw(err) 将错误抛回 Generator 函数，以便在 Generator 函数内部进行错误处理。

4. 执行 Generator 函数

最后，我们调用 runGenerator 函数并传入 asyncGenerator 作为参数。runGenerator 会返回一个 Promise，我们可以通过 .then() 和 .catch() 来处理最终的结果或错误。

runGenerator(asyncGenerator)
    .then(finalResult => {
        console.log('Final result:', finalResult);
    })
    .catch(err => {
        console.error('Error:', err);
    });

通过这种方式，我们可以使用 Generator 函数来处理异步操作，使代码看起来更像同步代码，同时保持异步操作的灵活性。