什么是JavaScript的迭代器与生成器在数据分页中的使用，以及它们如何实现按需加载和延迟计算？

next()

next()

yield

yield

next()

page

pageSize

yield

async function*

// 模拟一个后端API，每次返回一页数据
async function fetchPageFromAPI(pageNumber, pageSize) {
    console.log(`模拟API请求：正在获取第 ${pageNumber + 1} 页数据...`);
    return new Promise(resolve => {
        setTimeout(() => {
            const totalItems = 50; // 假设总共有50条数据
            const start = pageNumber * pageSize;
            const end = Math.min(start + pageSize, totalItems);

            if (start >= totalItems) {
                resolve({ data: [], hasMore: false }); // 没有更多数据了
                return;
            }

            const data = Array.from({ length: end - start }, (_, i) => `Item ${start + i + 1}`);
            const hasMore = (end < totalItems);

            resolve({ data, hasMore, nextPageNumber: pageNumber + 1 });
        }, 800); // 模拟网络延迟
    });
}

// 使用异步生成器实现分页加载器
async function* createPaginatedDataLoader(initialPage = 0, pageSize = 10) {
    let currentPage = initialPage;
    let hasMoreData = true;

    while (hasMoreData) {
        const response = await fetchPageFromAPI(currentPage, pageSize);
        if (response.data.length > 0) {
            yield response.data; // 每次yield出一页数据
        }

        hasMoreData = response.hasMore;
        currentPage = response.nextPageNumber;

        if (!hasMoreData) {
            console.log("所有数据已加载完毕。");
            break; // 没有更多数据时退出循环
        }
    }
}

// 实际应用示例
(async () => {
    console.log("------ 开始加载数据 ------");
    const dataIterator = createPaginatedDataLoader(0, 5); // 每页5条数据

    // 第一次调用next()，获取第一页
    let result = await dataIterator.next();
    console.log("第一页数据:", result.value); // [Item 1, Item 2, Item 3, Item 4, Item 5]
    console.log("是否完成:", result.done); // false

    // 第二次调用next()，按需获取第二页
    console.log("\n用户滚动到底部，请求加载第二页...");
    result = await dataIterator.next();
    console.log("第二页数据:", result.value); // [Item 6, Item 7, Item 8, Item 9, Item 10]
    console.log("是否完成:", result.done); // false

    // 继续加载...
    console.log("\n继续加载第三页...");
    result = await dataIterator.next();
    console.log("第三页数据:", result.value); // [Item 11, ..., Item 15]

    console.log("\n继续加载第四页...");
    result = await dataIterator.next();
    console.log("第四页数据:", result.value); // [Item 16, ..., Item 20]

    console.log("\n继续加载第五页...");
    result = await dataIterator.next();
    console.log("第五页数据:", result.value); // [Item 21, ..., Item 25]

    console.log("\n继续加载第六页...");
    result = await dataIterator.next();
    console.log("第六页数据:", result.value); // [Item 26, ..., Item 30]

    console.log("\n继续加载第七页...");
    result = await dataIterator.next();
    console.log("第七页数据:", result.value); // [Item 31, ..., Item 35]

    console.log("\n继续加载第八页...");
    result = await dataIterator.next();
    console.log("第八页数据:", result.value); // [Item 36, ..., Item 40]

    console.log("\n继续加载第九页...");
    result = await dataIterator.next();
    console.log("第九页数据:", result.value); // [Item 41, ..., Item 45]

    console.log("\n继续加载第十页...");
    result = await dataIterator.next();
    console.log("第十页数据:", result.value); // [Item 46, ..., Item 50]

    // 尝试加载更多，但已经没有数据了
    console.log("\n尝试加载第十一页...");
    result = await dataIterator.next();
    console.log("是否完成:", result.done); // true
    console.log("返回的值:", result.value); // undefined
})();

createPaginatedDataLoader

dataIterator.next()

yield

next()

next()