如何使用Axios获取JSON API分页接口的所有页面完整数据？

你可以通过循环批量生成请求，结合Axios的异步处理逻辑完成全量61页数据的拉取，以下是两种可直接落地的实现方式：

方案1：并行批量请求（请求速度快，适合无严格限流的接口） #

一次性生成所有页的请求，待全部请求返回后合并数据，代码修改如下：

<template>
  <div id="app">
    <thead></thead>
    <tbody>
      {{items}}
    </tbody>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    }
  },
  async created() {
    const totalPage = 61;
    const pageSize = 12;
    // 生成所有页的请求实例
    const requestList = Array.from({length: totalPage}, (_, i) => {
      const page = i + 1;
      return axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page=${page}&page_size=${pageSize}&type=5`)
    })
    // 等待所有请求返回
    const responseList = await Promise.all(requestList);
    // 合并所有页的列表数据，此处默认接口返回列表字段为results，可根据实际返回结构修改
    this.items = responseList.flatMap(res => res.data.results);
  }
}
</script>

方案2：串行逐页请求（请求速度慢，可避免触发接口限流规则） #

逐页发起请求，每页请求完成后再发起下一页的请求，适合接口有QPS限制的场景：

<template>
  <div id="app">
    <thead></thead>
    <tbody>
      {{items}}
    </tbody>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    }
  },
  async created() {
    const totalPage = 61;
    const pageSize = 12;
    for(let page = 1; page <= totalPage; page++) {
      const res = await axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page=${page}&page_size=${pageSize}&type=5`)
      // 把当前页的列表数据追加到结果中
      this.items.push(...res.data.results);
      // 若需要降低请求频率，可加延迟，单位毫秒，如下为每请求一页等待500ms
      // await new Promise(resolve => setTimeout(resolve, 500))
    }
  }
}
</script>

注意事项 #

• 若接口总页数会动态变更，可先请求第一页，从返回的分页信息中读取总页数字段，动态生成请求队列，无需写死61的数值
• 并行请求页数过多时建议拆分批次，比如每10页为一批次请求，避免同时发起过多请求被接口拦截

内容的提问来源于stack exchange，提问作者Balazs Kelemen