异步迭代器通过异步生成器函数和for await...of语法简化分页数据流处理。定义async function* fetchPaginatedData可按需获取每页数据并yield结果，结合cursor实现自动翻页；使用for await(const page of stream)逐批消费，避免全量加载。支持break中断、try/catch错误捕获及AbortController取消请求，提升资源利用率与代码可读性。
处理分页的流式数据时，异步迭代器能让你以更简洁、直观的方式消费每一页内容，就像遍历本地数组一样。JavaScript 的异步生成器函数和异步迭代协议是实现这一目标的核心工具。
使用异步生成器创建分页数据流
你可以定义一个异步生成器函数，它在每次 yield 时自动获取下一页数据。只要还有更多页，就继续请求并产出结果。
例如，假设后端通过cursor 标记分页位置：async function* fetchPaginatedData(url) {
let currentUrl = url;
while (currentUrl) {
const response = await fetch(currentUrl);
const data = await response.json();
// 假设响应中包含 items 和 nextCursor
yield data.items;
// 更新下一页的 URL，如果没有更多数据则退出
currentUrl = data.nextCursor ? `${url}?cursor=${data.nextCursor}` : null;
}
}
通过 for await...of 消费流式数据
有了异步迭代器后，你可以用 for await...of 逐批处理数据，无需一次性加载全部内容。
比如实时展示每页结果：const stream = fetchPaginatedData('/api/items');
for await (const page of stream) {
for (const item of page) {
console.log(item); // 或更新 UI
}
}
控制流与错误处理
异步迭代器也支持中断和异常捕获，适合长时间运行的数据流。
立即学习“Java免费学习笔记（深入）”；
你可以：
- 在循环中根据条件 break 提前终止拉取
- 用 try/catch 捕获某次请求失败，避免整个流程崩溃
- 结合 AbortController 实现超时或手动取消
try {
for await (const page of fetchPaginatedData('/api/items')) {
if (page.length === 0) break;
render(page);
}
} catch (err) {
console.error('请求出错:', err);
}
基本上就这些。利用异步生成器把分页逻辑封装起来，再用 for await 消费，代码更清晰，资源占用更低。
