后端数据做了分页处理，前端如何获取全部数据

场景

通常情况下，分页功能由后端处理，前端通过传递不同的参数获取对应的数据。但是，如果前端需要获取全部数据，且接口没有提供支持，就必须手动处理数据。

先看下接口请求

query(api,{"pageNum":2,"pageSize":100})  //取页大小为100时，第2页的数据

//接口返回该页数据、页大小和总页数
{
  "data":["item1","item2","item3"...],
  "pageSize" : 100,
  "totalPage" : 5
}

问题

首先，我们需要调用一次接口来获取数据总页数。否则，我们无法判断数据一共有多少页。其次，我们需要确定需要查询多少次才能获取全部数据，并将结果合并。最后，我们需要做好防止接口异常的准备。

思路与实现

具体方法是，首先获取分页信息，将页大小设置为最大值（pageSize:1000），以保证用最少的次数去请求，并从第一页（pageNum:1）开始查询。获取信息后，判断是否需要继续请求，可以通过递归来继续查询。同时，我们需要使用promise.catch来处理异常情况。以下是示例代码：

const getAllData = (pageNum = 1, allData = []) => {
      // 请求接口,获取分页信息
      return fetchAPI(pageNum).then((res) => {
        const { pageNum, totalPage, data } = res;
        // 将当前页数据添加到数据列表中
        allData.push(...data);
        // 如果已经获取完全部数据，则返回数据列表
        if (pageNum >= totalPage) {
          return allData;
        } else {
          // 如果当前页不是最后一页，则继续请求下一页数据
          return getAllData(pageNum + 1, allData);
        }
      });
    }

    getAllData()
      .then(doSomethingWithData)
      .catch(throwError)

小结

本文主要分享了一种通过获取接口返回值并对接口进行重复查询与拼接数据的方法，在特定情况下可以实现功能。但是，在实际开发中并不推荐这种做法，可能会增加出错率或降低项目的可维护性，更好的处理方式应该是让后端去做接口支持或新增接口。