JavaScript 异步生成器

摘要: 本教程将介绍 JavaScript 异步生成器，它可以迭代异步获取的数据。

什么是异步生成器

异步生成器类似于普通的 生成器，区别在于它的 next() 方法返回一个 Promise。 要迭代异步生成器，请使用 for await...of 语句。

JavaScript 异步生成器简介

普通生成器是一个可以暂停并在暂停处继续执行的函数。 请看以下示例

function* sequence(start, end) {
    for (let i = start; i <= end; i++) {
        yield i;
    }
}

let seq = sequence(1, 5);

for (const num of seq) {
    console.log(num);
}
Code language: JavaScript (javascript)

sequence 是一个从 start 到 end 返回数字的生成器。

异步生成器类似于普通生成器，但有以下区别

• async 关键字放在 function 关键字之前。
• yield 返回一个 Promise，而不是一个值。 Promise 通常是异步操作的包装器。

以下说明了如何将生成器 sequence 转换为异步生成器 asyncSequence

async function* asyncSequence(start, end) {
    for (let i = start; i <= end; i++) {
        yield new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(i);
            }, 1000);
        });

    }
}Code language: JavaScript (javascript)

请注意，我们使用了 setTimeout() 来模拟异步操作。

要迭代整个异步生成器，请使用 for await...of 语句。

由于我们只能在 async 函数中使用 await 关键字，因此我们将代码包装在一个异步 IIFE 中，如下所示

(async () => {
    let seq = asyncSequence(1, 5);

    for await (let num of seq) {
        console.log(num);
    }
})();
Code language: JavaScript (javascript)

该代码每秒返回 1 到 5 的序列。

1
2
3
4
5
Code language: JavaScript (javascript)

当您访问数据流并希望报告进度（例如使用进度条）时，异步生成器非常有用。