背景:
分页请求接口数据,每页有最大请求条数限制。但前端需要一次性获取到全部数据,那么前端就需要循环调用接口,直到获取到全部的数据。
封装方法
getAllData.js
export async function callMethodLimitPage (fn, param, pageIndex, arr) {
let pageSizeMax = 500
// if (param.pageSize && param.pageSize > 100) {
// pageSizeMax = param.pageSize
// }
const { totalSize, content } = await fn({ pageNum: pageIndex, pageSize: pageSizeMax })
console.log(totalSize, content)
const dataClone = content || [];
if (arr.length + pageSizeMax < totalSize) {
return callMethodLimitPage(fn, param, pageIndex + 1, [...arr, ...dataClone])
}
return new Promise((resolve) => {
resolve({
data: [...arr, ...dataClone].length ? [...arr, ...dataClone] : null,
errorCode: 0,
errorDesc: 'success',
totalCount: [...arr, ...dataClone].length,
})
})
}
参数说明:
参数一:service.js中抛出的接口请求方法。 (必填)
参数二:请求参数。(必填)
参数三:从第几页开始请求。
参数四:初始时的默认数据,如:全部选项 (非必填)
(参数四 一般用不到)
使用:
import {callMethodLimitPage} from './getAllData.js'
mounted() {
this.getAllData()
},
methods: {
async getAllData () {
const res = await callMethodLimitPage(getInfoByCarNumber, this.params, 1, [])
console.log(res)
}
}