JavaScript如何实现分页加载_JavaScript异步请求如何拼接分页数据

分页加载的核心是按需获取、动态追加，需维护page、hasMore、loading状态，通过滚动监听触发fetch请求并拼接数据，注意防重复、防错乱、状态同步。

分页加载的核心是“按需获取、动态追加”，不是一次性拉完再切片，而是每次请求一页数据，成功后拼接到已有列表中。关键在于维护好页码状态、避免重复请求、处理加载中与失败状态。

1. 基础分页参数与状态管理

前端需要主动跟踪当前页码、是否还有下一页、是否正在加载等状态，不能依赖后端返回的 total（除非必须做页码导航）：

• page：当前请求的页码，从 1 开始（或 0，需与接口约定一致）
• pageSize：每页条数，通常固定（如 10 或 20）
• dataList：已加载的数据数组，用于后续拼接
• hasMore：布尔值，标识是否还有更多数据（后端应返回 has_more: true 或 next_page: 2 等）
• loading：防止用户快速滚动多次触发请求

2. 异步请求 + 数据拼接（推荐 fetch + async/await）

以滚动到底部自动加载为例，每次请求成功后将新数据 push 或 concat 到原数组：

let dataList = [];
let page = 1;
const pageSize = 10;
let hasMore = true;
let loading = false;
<p>async function loadMore() {
if (loading || !hasMore) return;</p><p>loading = true;
try {
const res = await fetch(<code>/api/list?page=${page}&size=${pageSize}</code>);
const { data, has_more } = await res.json();</p><pre class="brush:php;toolbar:false;">// 拼接数据：直接 push 或用 concat 生成新数组（推荐后者，便于 React/Vue 响应式更新）
dataList = dataList.concat(data);

hasMore = has_more;
page++;

登录后复制

} catch (err) { console.error("加载失败", err); } finally { loading = false; } }

3. 滚动监听触发加载（防抖 + 判定底部）

监听容器滚动，当距离底部一定距离（如 100px）且未加载中时触发：

标签： vue react javascript java js 前端 json 后端 ai