生成器函数用function*定义，配合yield按需返回数据，天然支持懒加载和分页请求；可封装异步分页逻辑，结合迭代器协议用于for...of等场景，并通过状态管理控制UI加载态。
生成器函数通过 function* 定义，配合 yield 暂停执行并返回值，天然适合按需加载数据——每次调用 next() 才产生下一个数据项，不提前计算、不占用多余内存。
用生成器模拟分页请求
实际场景中，API 通常分页返回数据（如每页 10 条）。生成器可封装「取一页 → yield 每条 → 自动请求下一页」的逻辑，避免一次性拉取全部数据。
示例：模拟从后端按页加载用户列表
async function* fetchUsersByPage() {
let page = 1;
while (true) {
const res = await fetch(`/api/users?page=${page}&limit=10`);
const users = await res.json();
<pre class="brush:php;toolbar:false;">// 每个用户逐个 yield，调用方可随时中断
for (const user of users) {
yield user;
}
// 没有更多数据时退出循环
if (users.length < 10) break;
page++;} }
使用时：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const userGen = fetchUsersByPage();
<p>// 只取前 5 个用户，后续请求不会发起
for (let i = 0; i < 5; i++) {
const { value, done } = await userGen.next();
if (done) break;
console.log(value.name);
}结合迭代器协议实现懒加载列表
生成器返回的是符合迭代器协议的对象，可直接用于 for...of、扩展运算符（谨慎）、或转为数组（不推荐全量）。
-
for...of：自动按需调用
next()，适合遍历渲染 - Array.from(gen, mapFn)：可对前 N 项做转换，仍保持懒性
- 避免 [...gen]：会强制执行完所有 yield，失去按需意义
处理异步与错误边界
生成器本身不处理 Promise，但 async function* 允许 await 和 yield 混用。注意错误需在生成器内部捕获，否则会抛到调用方：
async function* safeFetchPosts() {
try {
const res = await fetch('/api/posts');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const posts = await res.json();
for (const post of posts) yield post;
} catch (err) {
console.warn('加载失败，返回空数据', err);
// 可选择 yield 默认项或直接 return
}
}搭配状态管理实现“加载中”控制
按需加载常需 UI 反馈（如 loading 状态）。可在生成器外维护一个状态对象，每次 next() 前置为 pending，yield 后置为 idle：
const loader = {
isLoading: false,
async next() {
this.isLoading = true;
const result = await userGen.next();
this.isLoading = false;
return result;
}
};组件中即可响应 loader.isLoading 显示 spinner。
