如何应用迭代器实现不确定长度数据流的动态分页封装实战对接前端异步无限滚动变量加载-java教程-PHP中文网

用异步生成器封装游标分页流，内部维护cursor状态，按需yield整页数据，前端用for await消费，支持中断、错误捕获与取消，避免状态复用和无限请求。

如何应用迭代器实现不确定长度数据流的动态分页封装实战对接前端异步无限滚动变量加载

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

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

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

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

示例：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

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 会按需触发下一页请求：

滚动到底部时，启动或继续 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();
}
});</p>