异步生成器是结合async/await与生成器的函数,通过async function*定义,返回可异步遍历的迭代器。它适合处理分页请求,如逐页获取API数据,使用for await...of按需消费每页结果,避免内存过高。示例中封装了分页逻辑,每次yield返回一页数据,根据响应判断是否继续请求。优势包括内存友好、逻辑清晰、可中断和流式处理,适用于大量分页数据场景。注意需设置终止条件、处理错误并确认环境兼容性。异步生成器让分页像遍历数组一样自然,兼具异步非阻塞特性,是处理分页数据的优雅方案。

异步生成器在JavaScript中非常适合处理分页请求,因为它能以同步写法实现异步数据的逐步获取,特别适合处理大量分页数据时避免内存占用过高。
什么是异步生成器?
异步生成器是结合了 async/await 和 生成器函数 特性的函数,定义方式是在 function* 前加上 async。它返回一个异步迭代器,可以用 for await...of 遍历。
示例定义:
async function* fetchPages(url) {
let page = 1;
while (true) {
const response = await fetch(`${url}?page=${page}`);
const data = await response.json();
if (data.results.length === 0) break;
yield data.results;
page++;
}
}
如何用于分页请求?
在处理API分页(如GitHub、微博、商品列表等)时,通常需要逐页拉取直到没有更多数据。异步生成器可以封装这个过程,让调用方按需消费每一页。
立即学习“Java免费学习笔记(深入)”;
常见使用方式:
- 每次
yield返回一页结果 - 根据响应判断是否继续请求下一页
- 外部使用
for await...of按需处理每批数据
实际请求示例:
async function* getUserPosts() {
let page = 1;
const limit = 10;
while (true) {
const res = await fetch(`/api/posts?page=${page}&limit=${limit}`);
const { data, hasMore } = await res.json();
if (data.length === 0) break;
yield data;
if (!hasMore) break;
page++;
}
}
// 使用:逐页处理,不一次性加载所有数据
for await (const posts of getUserPosts()) {
console.log('拿到一页:', posts.length, '条');
// 可用于渲染、存储或进一步处理
}
优势与适用场景
相比一次性获取所有页或手动管理翻页逻辑,异步生成器更清晰且资源友好。
- 内存友好:只在需要时拉取下一页
- 逻辑清晰:生成器内部封装翻页逻辑,外部只需遍历
- 可中断:可在任意页停止遍历,不会继续请求
- 支持流式处理:适合导出数据、实时展示等场景
注意事项
使用时注意以下几点:
- 确保有终止条件(如空数据、hasMore为false),避免无限请求
- 错误处理建议在生成器内部加 try/catch,或在遍历时捕获
- 某些环境需检查浏览器兼容性(现代Node.js和主流浏览器都支持)
基本上就这些。异步生成器让分页请求变得像遍历数组一样自然,同时保持异步非阻塞特性,是处理分页数据的一种优雅方式。










