Как я могу получить все данные с нескольких страниц из моего API?

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 для обработки в начале загрузки и управления состоянием загрузки.