symbol.asynciterator用于定义异步迭代行为，使对象支持for await...of；paginatedarray类通过缓存页数据、管理分页状态和返回promise实现分片加载，asyncgenerator版本更简洁且天然支持中断。
Symbol.asyncIterator 是 JavaScript 中用于定义对象异步迭代行为的内置符号。它让对象支持 for await...of 语法，特别适合处理流式、分页、延迟加载等场景——比如从后端分批拉取数据、按需渲染长列表、或模拟“无限滚动”时的数组分片加载。
为什么用 asyncIterator 而不是普通 iterator？
普通 Symbol.iterator 返回同步迭代器，每次 next() 必须立刻返回 { value, done }；而流式加载（如 fetch 分页）本质是异步的，需要等待网络响应。若强行同步模拟，会阻塞主线程或导致错误。asyncIterator 返回的是 异步迭代器，其 next() 方法返回 Promise，自然适配异步分片获取逻辑。
实现一个可分片加载的异步可迭代数组类
下面是一个轻量、可复用的 PaginatedArray 类，它内部管理分页状态，对外暴露 [Symbol.asyncIterator]：
- 构造时传入分页函数（如
fetchPage(pageNumber, pageSize)），该函数应返回Promise<t></t> - 维护当前页码和是否已加载完的标志
-
next()每次触发一次分页请求，返回该页数据的首个元素（逐个 yield），页内遍历完再请求下一页 - 支持提前终止（
return()或异常中断），自动停止后续请求
示例代码：
class PaginatedArray {
constructor(fetchPage, options = {}) {
this.fetchPage = fetchPage;
this.pageSize = options.pageSize ?? 10;
this.currentPage = 0;
this.cache = []; // 当前页缓存
this.done = false;
}
<p>async next() {
if (this.done && this.cache.length === 0) return { value: undefined, done: true };</p><pre class="brush:php;toolbar:false;">// 当前页空了，且还没结束 → 加载下一页
if (this.cache.length === 0 && !this.done) {
try {
const pageData = await this.fetchPage(++this.currentPage, this.pageSize);
this.cache = Array.isArray(pageData) ? pageData : [];
if (this.cache.length === 0) this.done = true;
} catch (err) {
this.done = true;
throw err;
}
}
// 取出第一个元素
const value = this.cache.shift();
return {
value,
done: this.done && this.cache.length === 0
};}
[Symbol.asyncIterator]() { return this; } }
// 使用示例：模拟分页 API
const mockApi = async (page, size) => {
await new Promise(r => setTimeout(r, 200)); // 模拟网络延迟
const start = (page - 1) * size;
return Array.from({ length: size }, (_, i) => item-${start + i});
};
const stream = new PaginatedArray(mockApi, { pageSize: 3 });
// 在 async 函数中使用 (async () => { for await (const item of stream) { console.log(item); // item-0, item-1, item-2, item-3... if (item === 'item-5') break; // 可随时中断 } })();
关键细节与注意事项
-
缓存页内数据：避免对同一页面重复调用
fetchPage，用this.cache存储当前页剩余项，保证next()的高效性 - done 状态需双重判断：既要检查是否已无缓存，也要确认是否确定无下一页（如后端返回空数组）
-
错误传播要明确：fetch 失败时设
this.done = true并 re-throw，使for await正确抛出异常 - 不支持随机访问或重置：asyncIterator 是单向、不可逆的；如需重试或跳页，应创建新实例
进阶：组合多个流或添加节流/取消信号
可在 fetchPage 调用中接入 AbortController 支持取消，或在 next() 中加入节流逻辑（如限制并发请求数）。也可用 AsyncGenerator 重写，更简洁地表达“一边拉一边 yield”逻辑：
async function* createStream(fetchPage, pageSize = 10) {
let page = 1;
while (true) {
const items = await fetchPage(page++, pageSize);
if (!items.length) return;
for (const item of items) yield item;
}
}
<p>// 用法完全一致
for await (const x of createStream(mockApi)) { ... }</p>Generator 版本语义更清晰，且天然支持 return() 和 throw()，适合复杂控制流。
