时间戳

首页 > 解决方案 > 如何从我的 api 获取多个页面的所有数据？

rest - 如何从我的 api 获取多个页面的所有数据？

问题描述

我正在为我的产品列表创建一个 Vue 应用程序。我正在尝试从我的 api获取所有产品信息。我的 api 有多个页面，我不确定如何在 url 中提及它。

var app = new Vue({
  'el': '#myapp',
  data: {
    products: "",
    chosenProduct: null
  },
  created: function() {
    axios.get("https://my_api_link/products?page=" + (page || 1) + "&limit=250&access_token=my_access_token", {
      headers: {
        Accept: 'application/json'
      }
    })
    .then(function(response) {
      app.products = response.results;
    })
    .catch(function(error) {
      console.log(error);
    });
  }
})

我已经尝试了上述方法，但它对我不起作用。将不胜感激一些帮助。

标签： restvue.jsaxios

解决方案

您将需要拨打多个电话。

虽然我可能不会使用这种方法来代替更复杂的方法，但我认为这可能会让您了解如何实现它。

这将获取已知数量的页面的数据，并且它们将并行加载。每次加载完成后，使用concat添加到products数组。请注意，因为它们是并行执行的，所以它假定您不关心订单，或者 Api 按照它收到调用的顺序响应。


// took out the axios call 
function getProducts(page) {
  return axios.get("https://my_api_link/products?page=" + page + "&limit=250&access_token=my_access_token", {
    headers: {
      Accept: 'application/json'
    }
  })
  .then(function(response) {
    return response.results;
  })
}

var app = new Vue({
  'el': '#myapp',
  data: {
    products: "",
    chosenProduct: null
  },
  created: function() {
    var products = [];
    var numPages = 12;

    for (var i = 0; i < numPages; i++) {
      getProducts(1).then(function(results){
        products = products.concat(results)
      }).catch(function(error) {
        console.log(error);
      });
    }

  }
})

正如我所提到的，我可能会使用更复杂的东西，比如 vuex 来处理加载开始和管理下载状态。

推荐阅读