初级项目中如何高效实现分页与动态加载分页数据？
- 内容介绍
- 文章标签
- 相关推荐
本文共计986个文字，预计阅读时间需要4分钟。
绝大多数初级项目使用的模式是页面+每页数量，而非游标分页。这意味着你必须维护currentPage和pageSize两个状态，每次请求都带上?page=2这样的参数。
常见错误是前端硬编码 currentPage++，但后端实际返回的总页数可能小于预期（比如删了数据），结果点到第 6 页时接口返回空数组，UI 却还在显示“加载中”。建议每次响应后检查 data.length === 0 且 currentPage > 1，就停掉自动加载。
滚动到底部触发加载时，如何防重复请求
监听 window.onscroll 或 IntersectionObserver 都行，但关键不是“怎么监听”，而是“怎么锁住请求”。最简单有效的方式是加一个开关变量：isLoading，在发起请求前设为 true，成功或失败后设回 false。千万别只靠节流（throttle）或防抖（debounce）——它们解决的是高频触发，不是并发请求。
本文共计986个文字，预计阅读时间需要4分钟。
绝大多数初级项目使用的模式是页面+每页数量，而非游标分页。这意味着你必须维护currentPage和pageSize两个状态，每次请求都带上?page=2这样的参数。
常见错误是前端硬编码 currentPage++，但后端实际返回的总页数可能小于预期（比如删了数据），结果点到第 6 页时接口返回空数组，UI 却还在显示“加载中”。建议每次响应后检查 data.length === 0 且 currentPage > 1，就停掉自动加载。
滚动到底部触发加载时，如何防重复请求
监听 window.onscroll 或 IntersectionObserver 都行，但关键不是“怎么监听”，而是“怎么锁住请求”。最简单有效的方式是加一个开关变量：isLoading，在发起请求前设为 true，成功或失败后设回 false。千万别只靠节流（throttle）或防抖（debounce）——它们解决的是高频触发，不是并发请求。