如何使用 Axios 从 GitLab API 获取所有数据？

Question

我想从我的 GitLab 实例托管的所有项目中获取数据。现在我知道 GitLab 默认显示 20 个项目，所以我需要设置更大的每页显示实例数：

https://gitlab-repo.com/api/v4/projects?per_page=100

因此引出了对应的axios代码：

const url='https://gitlab-repo.com/api/v4/projects?per_page=100'
const vm = new Vue({
el: "#app",
data: {
    results: [],
    loading: true,
    errored: false
},
mounted() {
    axios
        .get(url)
        .then(response => (this.results = response.data))
        .catch(error => {
            console.log(error)
            this.errored = true
        })
        .finally(() => this.loading = false)
}
})

问题是，GitLab 每页可以显示的最大项目数是 100，而我的项目数比这还多。

我考虑过在 axios 的 get 函数的 params 部分中对实例（项目）的数量设置条件，但不知道如何编写。

如何在我的 axios 请求中表明如果项目数大于 100，我想加载下一页的数据？

Answer 1

您首先要编写一个请求特定页面的函数，如下所示：

function getPage(page) {
  let url = `https://gitlab-repo.com/api/v4/projects?per_page=100&page=${page}`;
  return axios
        .get(url)
        .then(response => (response.data))
}

如果您的环境中有 async/await，那么我会做类似的事情，以继续请求下一页，直到您得到小于 100 个结果的结果

let resultCount = 100;
let results = [];
let page = 1;
while (resultCount === 100) {
  let newResults = await getPage(page);
  page++;
  resultCount = newResults.length;
  results = results.concat(newResults);
}

如何使用 Axios 从 GitLab API 获取所有数据？

How to fetch all data from GitLab API with Axios?

javascript

vue.js

axios

gitlab-api