js循环调用接口

一、使用场景

当前端调用后端接口时，如果被调用的接口有数量限制，比如一个获取人员列表的接口，接口限制每次最多获取1000条数据，而人员总数有2000多条，此时我们需要循环调用接口，从而获取到所有的人员列表。

二、方法

注：以下示例代码是在vue中的写法

• 第一步：封装被循环调用的接口

async getList(url,method,data){
     return axios({
        method: method,//请求方式，get/post
        url: url,//接口路径
        data: data//请求参数
      })
        .then((res) => {
          if (res.data.success==true) {
            return res.data  
          } 
        })
        .catch((err) => {
          console.log("获取数据失败",err)
        });
    }

• 第二步：循环调用封装好的getList()函数，获取所有数据

//由于调用getList()时，用到了await，所以方法前面需要加上async
async requestData() {
let url = "/api/v2/open/worksheet/getFilterRows";
let method="post";
let data = {
      pageSize: 1000,
      pageIndex: 1
    }   
let content=[];//存放多次调用获取到的数据
//获取第一页数据
var results=await this.getList(url,method,data);
//将第一页数据放入content数组中
content=content.concat(results.list);

//如果数据超过1000条，获取第2、3、4...页数据
var total = results.total;//获取总条数
var page = Math.ceil(total/1000);//计算需要多少页
if(page>1){
 for(var i = 2;i<=page;i++){
   data.pageIndex = i;//更改页码
   let newResults = await this.getList(url,method,data);
   //将第2、3、4...页数据放入content数组中
   content=content.concat(newResults.list);
}
}

• 第三步：在created中调用requestData()函数

 created() {
    this.requestData();
 }