你大概也在 uni-app 项目里写过这样的分页加载——在 onReachBottom 里加一页、发请求、拼数组：

这段代码能跑，但里面至少埋了三个常见问题。你可能已经在线上遇到过其中一两个：

• 竞态使用者快速滚动触发两次 onReachBottom第 N 页和第 N+1 页的请求同时在飞。谁先回来谁先拼进数组——弱网下第 N 页完全可能先到，列表顺序就乱了。
• 重复请求onReachBottom 在部分网站会连续触发多次没有防重，同一页数据会被请求并拼接两遍。
• 边界缺失没有“是否最终一页”的判断，滚到底还在发空请求；下拉刷新和加载更多共用一个 loading刷新时列表先被清空再慢慢回填，页面会闪。

要把这三个坑都补上，还得加：

• 请求去重的标记位；
• 按页码丢弃过期响应；
• isLastPage 判断；
• 刷新与追加两套状态…，手写下来通常是几十行与列表业务无关的样板代码，而且每个列表页都要再来一遍。不过，

理想的分页方案需要什么

先不谈任何库。一个“不出事”的分页实现至少要内建这些能力：

• 请求级去重同参数请求在飞时不重发；
• 响应按页归位晚到的旧页响应不能覆盖新页；
• 追加 / 刷新两种模式加载更多是追加，下拉刷新是重置；
• 边界状态isLastPage/Total/loading / preloading 要能直接拿到；怎么说呢，
• : 同一套代码要能跑在小程序、H5、App。

最终一点是 uni‑app 场景的特殊约束——React Query、SWR 等方案默认面向浏览器 fetch{' '}，在小程序环境（uni.request)里没有官方适配。这也是很多 uni‑app 项目最终还是回到手写的原因。

用 usePagination 实现

是一个请求策略库：同一套 API 能跑在 Web、App还有服务端。它通过 @alova/adapter-uniapp{' '}适配器直接使用 uni.request{' '}发请求，上层的 usePagination{' '}hook 把上面那份需求清单全部内建了。

安装

npm install alova @alova/adapter-uniapp @alova/shared --save

创建 alova 实例

// api/index.js
import { createAlova } from 'alova';import AdapterUniapp from '@alova/adapter-uniapp';export const alovaInst = createAlova({
baseURL: 'https://api.example.com'。...AdapterUniapp,responded {
const { statusCode,data } = response;if {
throw new Error;}
return data?，null;}
})，

列表页完整实现

对比一下：

• The business code now only cares about “page++” and “reload”。
• The three坑对应的防护逻辑（请求共享去重、响应归位、) 都由 hook 内部统一处理。
• `usePagination` 默认开启相邻页预加载，翻页时下一页往往已经在缓存里。
• SAME CODE 编译到微信小程序、H5、App 均可运行——底层始终是 `uni.request`。
• If you already use axios on H5,you can switch to `@alova/adapter-axios` without changing business logic.

什么情况下你不需要它

If any of following holds。手写可能更轻量：

• 列表只有一页或数据量固定：{' '}只需一次 uni.request 加一个 ref 就够了。不过，
• 项目只跑 H5 且已深度使用 React Query / SWR：它们在纯浏览器环境很成熟。没必要为单端项目换方案，其实，
• uni‑app Vue 项目：@alova/adapter-uniapp 当前仅支持 Vue。若你使用的是 Vue2 + Options API，需要自行评估兼容性。
• 团队已有稳定且的分页封装：老代码跑得稳，就等下一次重构窗口再换。
<\/ul>

If your project contains multiple lists,has ever hit pagination race conditions or duplicate requests in production。or needs to maintain 小程序 + H5 + App 三端 simultaneously—give `usePagination` a try:

<

bash npm i alova

一下

分页这件“小事”，踩过坑的人都懂——它一点都不小。手写可以跑，但竞态、重复请求、边界缺失这三座小山。会在项目变大、列表增多时反复出现。

usePagination 做的事很朴素：把“怎么请求分页”从业务里抽走，你只管 `page++` 和 `reload`。上面那段 `npm i alova` 就是全部起点，剩下的交给 hook 内建的请求去重、响应归位和末页判断。

如果这篇对你有帮助。欢迎点赞收藏，后面我会继续写 uni‑app + alova 的实战踩坑。说起来，