[Vuejs]-How can I get all data from multiple pages from my api?

by

0👍

You will need to make multiple calls.

While I would probably not use this approach in lieu of something more complex, I think this may give you an understanding of how to achieve it.

This will get data for a known amount of pages, and they will load in parallel. After each load completes, using concat to add to the products array. Note that because they’re executed in parallel it assumes that you either don’t care about the order, or that the Api responds in the order it received the call. 


// 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);
      });
    }

  }
})

As I mentioned, I would likely use something more complex, like vuex to handle when the loading starts and managing the state of download.

Leave a comment