现有分页请求方案的问题

分页列表作为展示大量数据列表最普遍的解决方案，在我们日常开发中几乎是绕不开的需求了，只是，呃...使用axios或fetch API等请求工具编写的分页请求方案，不仅需要编写分页请求函数，还需要自行管理分页数据和请求相关状态，从而产生大量的模板代码。

如果你忘记了怎么实现分页，这里有一个使用axios+vue3实现的最简单的分页请求功能。

但在实际场景中并不会那么简单，通常我们还需要考虑以下这些问题。

1. 条件筛选
2. 关键词搜索的请求防抖功能
3. 列表项增加、编辑、删除等操作
4. 需要实现大量列表页，以及后续的代码维护，总不能每个页面都复制粘贴那么多模板代码吧！

一句代码解决

需要考虑那么多情况，真的是一件很麻烦的事，今天我们就来解决这些问题，使用1句代码足矣！！！

上代码！！！先来看下这1句代码怎么写的。

这1句代码里包含了上面实际场景中的所有功能，在requestStates中就已经包含了分页请求的相关状态并实现了自动管理它们，以及包含了列表项操作函数等。

这里使用的是alova的分页请求策略，是一个基于alova封装的use hook，它的功能不仅仅是帮你自动管理分页数据，还提供了一系列经过优化的功能，让分页请求流畅性提升300%，从而让用户体验更好。

等等！！不是说让axios一句话实现分页请求吗？axios呢？？？

其实，axios已经在创建alova实例时被指定为了请求发送工具，如下：

const alova = createAlova({
  statesHook: VueHook,
  // 设置axios为请求适配器
  requestAdapter: axiosRequestAdapter(),
});

你可以把alova理解成axios或fetch api等请求工具的上层封装，并为请求工具们提供了一套武器装备，让请求工具变得更加强大，是一种互相依赖的关系。

怎么使用呢？

接下来我们看看alova的usePagination具体是如何做到这些的，以及它的使用方法。

具体的usePagination使用教程直通车在这，以下代码以vue3为例，你还可以在react、svelte其他两个UI框架中使用它哦。

自动管理分页数据

正如上面的一句代码示例，你只需要指定请求哪个接口，分页策略将会自动为你创建并管理页码、每页条数、列表数据、请求loading等相关数据，页码改变即自动翻页，简直不要太方便了啊！

const {
  // 加载状态
  loading,

  // 列表数据
  data,

  // 是否为最后一页
  // 下拉加载时可通过此参数判断是否还需要加载
  isLastPage,

  // 当前页码，改变此页码将自动触发请求
  page,

  // 每页数据条数
  pageSize,

  // 分页页数
  pageCount,

  // 总数据量
  total
} = usePagination(
  // Method实例获取函数，它将接收page和pageSize，并返回一个Method实例
  (page, pageSize) => requestList(page, pageSize)
);

function requestList(page, pageSize) {
  return alova.Get('/list', {
    params: {
      page,
      pageSize
    }
  })
}

以上解构的数据都是ref值，你可以直接绑定到视图中。然后在改变page和pageSize值即可自动发送请求刷新列表数据data。

<template>
  <!-- ... -->
  <button @click="handlePageChange">翻页</button>
  <button @click="handlePageSizeChange">改变每页列表条数</button>
</template>

<script setup>
// ...省略usePagination代码
// 翻页点击事件
const handlePageChange = () => {
  page.value++;
};
// 改变每页列表条数
const handlePageSizeChange = () => {
  pageSize.value += 10;
};
</script>

如果需要实现移动端下拉加载更多，只需要在usePagination第二个参数中设置追加模式就可以了，翻页数据就会追加到data数组后面了。

usePagination(requestList, {
  // 开启追加模式
  append: true
});

下拉加载更多的demo在这

翻页免等待，流畅性拉满

普通的分页列表在每次翻页时才加载数据，给用户有卡顿感，而alova的usePgaination内置的预加载功能可以帮用户自动加载好下一页的数据，当用户翻页时从缓存中取出下一页的数据作为响应数据，实现秒翻页。

看看下面的效果，这个demo链接在这。

这在usePagination中是默认行为，当然你也可以参照文档关闭它。

列表数据筛选

接下来让我们再为列表添加关键字筛选数据，只需要指定筛选字段的响应式状态，状态改变自动发送请求，同时再给它指定debounce实现关键字输入防抖，。

const keyword = ref('');
usePagination(requestList, {
  // 设置监听状态
  watchingStates: [keyword],
  // 设置防抖500ms
  debounce: 500
});

操作列表

一般来说，在操作列表项后都选择重置列表到第一页，为什么？因为这样最便于开发，但对于用户体验来说就一个字，不好用！用户又需要重新翻页，而alova的usePagination会自动帮你处理列表操作后的流程，用性能更好的方式实现相同的效果。

• 使用insert函数新增列表项，它将会在插入之后去掉末尾的一项，来保证和重新请求当前页数据一致的效果。

const { insert } = usePagination(requestList);
const handleAddItem = newItem => {
  insert(newItem, 0); // 插入到开头
}

• 使用remove函数删除列表项，它可以让你传入删除的列表项对象或列表索引删除项，同时为了保证性能，删除功能将会在移除列表项后使用下一页的缓存补充到列表项尾部，来保证和重新请求当前页数据一致的效果。

const { remove } = usePagination(requestList);

// 传入删除项进行删除
const handleRemoveItem = removingItem => {
  remove(removingItem);
}
// 根据索引删除项
const handleRemoveItemByIndex = itemIndex => {
  remove(itemIndex);
}

• 更新列表项，你也可以传入旧的列表或索引替换它

const { replace } = usePagination(requestList);

// 传入被替换项进行定位
const handleReplaceItem = (newItem, oldItem) => {
  replace(newItem, oldItem);
}
// 根据索引定位替换项
const handleReplaceItemByIndex = (newItem, oldItemIndex) => {
  replace(newItem, oldItemIndex);
}

手动刷新某页数据

如果你就希望在操作了列表项后重新请求接口更新数据，而不是交由操作函数自动处理，这时候，你还可以使用refresh函数来做到，它可以让你刷新指定的页面，即使在移动端的追加模式下也可以做到，从而也避免重置回第一页的问题。

const { refresh } = usePagination(requestList);

// 传入页码刷新指定页面
// 常用在页码模式下
const handleRresh = page => {
  refresh(page);
}
// 传入列表项刷新指定页面，它会根据列表项所在页码定位刷新页面
// 常用在移动端下拉加载模式下
const handleRreshByItem = item => {
  refresh(item);
}

1. 重置

虽然上面的很多操作为了提升用户体验尽量避免了重置列表，但该有的还是要有，你可以调用reload重置列表，它将回到第一页并重新加载数据。

const { reload } = usePagination(requestList);
// ...

总结

上面可能很多地方只展示了alova的usePagination的基本使用，可能你还会有其他疑问，可以在评论区里提问。

以下是alovajs库的通道

• alova官网
• alova Github地址

除此以外，alova还提供了一系列的高性能且易用的请求策略，如下表：

名称	描述	文档
分页请求策略	自动管理分页数据，数据预加载，减少不必要的数据刷新，流畅性提高 300%，编码难度降低 50%	usePagination
无感数据交互策略	全新的交互体验，提交即响应，大幅降低网络波动造成的影响，让你的应用在网络不稳定，甚至断网状态下依然可用	useSQRequest
表单提交策略	为表单提交而设计的 hook，通过此 hook 你可以很方便地实现表单草稿、多页面（多步骤）表单，除此以外还提供了表单重置等常用功能	useForm
发送验证码	验证码发送 hook，减掉你在开发验证码发送功能时的繁琐。	useCaptcha
跨组件触发请求	一个 alova 中间件，消除组件层级的限制，在任意组件中快速地触发任意请求的操作函数	actionDelegationMiddleware
串行请求的 useRequest	比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数	useSerialRequest
串行请求的 useWatcher	比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数。	useSerialWatcher
请求重试策略	请求失败自动重试，它在重要的请求和轮询请求上发挥重要作用	useRetriableRequest