用异步生成器封装游标分页流，内部维护cursor状态，按需yield整页数据，前端用for await消费，支持中断、错误捕获与取消，避免状态复用和无限请求。
用迭代器封装不确定长度的数据流，核心是把“分页”从控制逻辑里抽出来，变成可复用、可中断、可按需拉取的状态机。前端无限滚动不关心总数、不预加载全部，只在需要时拿一批；后端或数据源也不必一次吐完，而应支持游标驱动、懒加载、流式产出。关键不在“怎么分”，而在“谁维护状态”和“谁决定何时停”。
用异步生成器封装带游标的分页流
真实接口极少靠 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();
<pre class="brush:php;toolbar:false;">if (!data.items || data.items.length === 0) break;
yield data.items;
cursor = data.next_cursor;
if (!cursor) break;} }
前端用 for await 消费，自然对接无限滚动
拿到异步迭代器后，前端无需手动管理页码或 loading 状态，for await 会按需触发下一页请求：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 滚动到底部时，启动或继续 for await 循环，每次迭代得到一页数组
- 可随时 break 中断（比如用户跳转路由、切换标签页）
- 配合 AbortController 可取消正在进行的 fetch，防止页面卸载后还在发请求
- 渲染逻辑专注 UI 更新，不掺杂分页调度
示例：
const stream = fetchItems('/api/posts');
let isLoading = false;
<p>async function loadNextBatch() {
if (isLoading) return;
isLoading = true;</p><p>try {
for await (const items of stream) {
appendToDom(items);
isLoading = false;
break; // 每次只取一页
}
} catch (err) {
console.error('加载失败', err);
isLoading = false;
}
}</p><p>// 监听滚动到底部
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，符合标准异步迭代器协议
- 实现 Symbol.asyncIterator，让实例可直接用于 for await
- 多个组件可共享同一实例，避免重复请求相同页
这样既保持语义清晰，又为复杂交互留出扩展空间，比裸用 async* 更健壮。
