252 - 异步迭代器 - 异步迭代协议 - 异步迭代器的概念规则

异步迭代器 - 异步迭代协议 - 异步迭代器的概念规则

在 JavaScript 的世界里，异步操作是处理耗时任务（如网络请求、文件读取等）的关键。而异步迭代器和异步迭代协议则为我们处理异步可迭代对象提供了强大的工具。本文将深入探讨异步迭代器、异步迭代协议的概念和规则，并通过实际例子帮助大家更好地理解。

同步迭代回顾

在介绍异步迭代之前，我们先简单回顾一下同步迭代。在 JavaScript 中，同步迭代使用 for...of 循环来遍历可迭代对象。可迭代对象需要实现 Symbol.iterator 方法，该方法返回一个迭代器对象，迭代器对象有一个 next() 方法，每次调用 next() 方法会返回一个包含 value 和 done 属性的对象。

const iterable = [1, 2, 3];
const iterator = iterable[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

异步迭代器和异步迭代协议的概念

异步迭代协议

异步迭代协议定义了一种标准的方式来异步地迭代数据。一个对象如果要成为异步可迭代对象，必须实现 Symbol.asyncIterator 方法。这个方法必须返回一个异步迭代器对象。

异步迭代器

异步迭代器是一个对象，它有一个 next() 方法。next() 方法必须返回一个 Promise，这个 Promise 会在解决（resolved）时返回一个对象，该对象包含 value 和 done 两个属性，和同步迭代器类似。

• value：表示当前迭代的值。
• done：是一个布尔值，true 表示迭代结束，false 表示还有更多的值可以迭代。

异步迭代器的规则

1. 实现 Symbol.asyncIterator 方法：异步可迭代对象必须有 Symbol.asyncIterator 方法，该方法返回一个异步迭代器。
2. next() 方法返回 Promise：异步迭代器的 next() 方法必须返回一个 Promise，这个 Promise 解决时返回包含 value 和 done 属性的对象。
3. 迭代结束：当 done 属性为 true 时，迭代结束，此时 value 属性通常为 undefined。

实际例子

自定义异步可迭代对象

下面是一个自定义的异步可迭代对象的例子，它模拟了一个异步生成数字的过程。

const asyncIterable = {
    [Symbol.asyncIterator]() {
        let i = 0;
        return {
            next() {
                const shouldContinue = i < 3;
                const nextValue = shouldContinue? i++ : undefined;
                return Promise.resolve({
                    value: nextValue,
                    done:!shouldContinue
                });
            }
        };
    }
};
(async () => {
    for await (const num of asyncIterable) {
        console.log(num);
    }
})();

在这个例子中，asyncIterable 对象实现了 Symbol.asyncIterator 方法，该方法返回一个异步迭代器。异步迭代器的 next() 方法返回一个 Promise，模拟了异步操作。使用 for await...of 循环来异步迭代这个对象。

从 API 获取数据并异步迭代

假设我们有一个 API，每次请求会返回一个数字，我们可以使用异步迭代器来处理这些数据。

// 模拟 API 请求
function fetchNumber() {
    return new Promise((resolve) => {
        setTimeout(() => {
            const randomNumber = Math.floor(Math.random() * 100);
            resolve(randomNumber);
        }, 500);
    });
}
const numberFetcher = {
    [Symbol.asyncIterator]() {
        let count = 0;
        return {
            async next() {
                if (count < 3) {
                    const number = await fetchNumber();
                    count++;
                    return { value: number, done: false };
                }
                return { value: undefined, done: true };
            }
        };
    }
};
(async () => {
    for await (const num of numberFetcher) {
        console.log(num);
    }
})();

在这个例子中，numberFetcher 是一个异步可迭代对象，它的 next() 方法会异步地从模拟的 API 获取数据，直到获取了 3 个数字为止。

总结

异步迭代器和异步迭代协议为我们处理异步数据提供了一种优雅的方式，通过实现 Symbol.asyncIterator 方法和 next() 方法，我们可以创建自定义的异步可迭代对象，并使用 for await...of 循环来异步地遍历它们。希望本文能帮助你更好地理解和使用异步迭代器。