迭代器实现动态分页与异步加载实战

本文深入探讨了如何利用异步生成器（async generator）实现优雅、可控的动态分页与异步加载，核心在于将游标（cursor）状态封装在生成器内部，构建一个可中断、可取消、按需拉取的流式数据源；前端通过简洁的 `for await` 消费数据，天然适配无限滚动场景，无需手动管理页码、loading 状态或预加载全部内容，同时规避了状态复用、无限请求、静默失败等常见陷阱——真正把分页逻辑从业务代码中解耦出来，变成一个健壮、可复用、符合现代异步编程范式的状态机。

用迭代器封装不确定长度的数据流，核心是把“分页”从控制逻辑里抽出来，变成可复用、可中断、可按需拉取的状态机。前端无限滚动不关心总数、不预加载全部，只在需要时拿一批；后端或数据源也不必一次吐完，而应支持游标驱动、懒加载、流式产出。关键不在“怎么分”，而在“谁维护状态”和“谁决定何时停”。

用异步生成器封装带游标的分页流

真实接口极少靠 page=1/2/3 翻页，多数用 cursor 或 next_token 标记位置。异步生成器天然适合封装这种“请求→解析→更新游标→yield→循环”的流程：

• 每次 yield 一整页数据（如 data.items），不是单条记录，方便前端批量渲染
• 游标（cursor）必须在生成器内部维护，不能每次重置——否则永远拉第一页
• 响应中若无 next_cursor 或 items 为空，就 break 退出，生成器自动结束
• 错误要抛出，让调用方用 try/catch 捕获，避免静默失败

示例：

async function* fetchItems(url) {
  let cursor = null;
  while (true) {
    const params = cursor ? { cursor } : {};
    const res = await fetch(`${url}?${new URLSearchParams(params)}`);
    const data = await res.json();
if (!data.items || data.items.length === 0) break;
yield data.items;

cursor = data.next_cursor;
if (!cursor) break;
}
}

前端用 for await 消费，自然对接无限滚动

拿到异步迭代器后，前端无需手动管理页码或 loading 状态，for await 会按需触发下一页请求：

• 滚动到底部时，启动或继续 for await 循环，每次迭代得到一页数组
• 可随时 break 中断（比如用户跳转路由、切换标签页）
• 配合 AbortController 可取消正在进行的 fetch，防止页面卸载后还在发请求
• 渲染逻辑专注 UI 更新，不掺杂分页调度

示例：

const stream = fetchItems('/api/posts');
let isLoading = false;
async function loadNextBatch() {
if (isLoading) return;
isLoading = true;
try {
for await (const items of stream) {
appendToDom(items);
isLoading = false;
break; // 每次只取一页
}
} catch (err) {
console.error('加载失败', err);
isLoading = false;
}
}
// 监听滚动到底部
window.addEventListener('scroll', () => {
if (isAtBottom() && !isLoading) {
loadNextBatch();
}
});

避免常见陷阱：状态复用与边界控制

生成器对象是一次性的，不能反复 for await 同一个 stream —— 它内部游标已推进到最后。若需重试或刷新，应新建迭代器实例。

• 不要在生成器外传入 cursor 并每次重建：async function* g(cursor) { ... } → 每次调用都是新起点，丢失上下文
• 不要用 Array.from(stream) 或 [...stream]：会试图展开全部，导致无限请求
• 服务端需防滥用：生成器本身不限流，应在 fetch 层加节流（如最小间隔 300ms）、最大页数限制（如最多拉 100 页）或超时控制
• 前端应加防抖或节流，避免滚动事件高频触发多次 loadNextBatch

进阶：封装成类，支持多消费者与重用

若需支持“暂停/恢复”、“重试当前页”、“跳转到某页”等能力，建议把生成器逻辑收进类，暴露明确方法：

• 类内部持有当前 cursor、是否完成、缓存的未消费页等状态
• 提供 .next() 返回 Promise<{ value: T[], done: boolean }>，符合标准异步迭代器协议
• 实现 Symbol.asyncIterator，让实例可直接用于 for await
• 多个组件可共享同一实例，避免重复请求相同页

这样既保持语义清晰，又为复杂交互留出扩展空间，比裸用 async* 更健壮。

今天关于《迭代器实现动态分页与异步加载实战》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！