时间戳

首页 > 解决方案 > 使用 Vue 和 AXIOS 从 API 循环构建数组

javascript - 使用 Vue 和 AXIOS 从 API 循环构建数组

问题描述

我有一个 NIH API，一次只能调用 50 页。下面的代码适用于 50 个项目的第一页。

loadNIH() {
      let offset = 0;
      axios({
        method: "GET",
        url:
          "https://api.federalreporter.nih.gov/v1/projects/search?query=orgName:Medical University of South Carolina$fy:2016$&offset=" + offset +"&limit=50"
      })
        .then(res => {
          this.NIHData = res.data.items;
        })
        .catch(function(error) {
          console.log(error);
        });
    },

我需要循环所有页面，直到获得所有数据。每次偏移量需要增加接收到的页面数（请求 50），在此调用中增加 9 个页面。我需要它将数据添加到 this.NIHData 的数组中。我有一个工作，所以我需要一些帮助来创建循环。

提前致谢

标签： javascriptvue.js

解决方案

您应该重复调用 API，直到获得一个空的结果集。这可以通过以下方式轻松实现setTimeout()

loadNIH() {
  let params =
  {
    offset: 0
  }
  this.NIHData = [];
  this.fetchPages(params);
},
fetchPages(args)
{
  axios.get("https://api.federalreporter.nih.gov/v1/projects/search?query=orgName:Medical University of South Carolina$fy:2016$&offset=" + args.offset +"&limit=50"
  )
    .then(res => {
      this.NIHData.push(res.data.items);
      args.offset += res.data.items.length;
      if (res.data.items.length > 0) setTimeout(this.fetchPages, 2);
    })
    .catch(function(error) {
      console.log(error);
    });
}

推荐阅读