Question

我正在为我的产品清单创建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);
    });
  }
})

我已经尝试了上述方法，但对我而言不起作用。希望能有所帮助。

Answer 1

您将需要拨打多个电话。

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

这将获取已知数量页面的数据，并且它们将并行加载。每次加载完成后，使用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来处理加载开始时的情况以及管理下载状态。

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

1 个答案: