用 axios.all 處理多筆非同步請求Multi Request

用 axios.all 處理多筆非同步請求Multi Request

用 axios.all 處理多筆非同步請求Multi Request

一般在使用Ajax時,多為一次只發一個請求,這時候不管是使用Jquery 及 Axios都可以輕易的達到需求。

//jquery
$.post(url, data, callback());

//axios
axios.post(url, data)
        .then(callback)
        .catch(callback)

但是因為Javascript本身是屬於非同步的處理方式,所以在處理多筆請求時初學者一定會碰到以下方式處理:

const id = ['1','2','3'];
const url = 'http//:your-url';
const result = [];
id.map(id => {
    let response = $.post(url, {id}) ;
    result.push(response);
});
//or
for(i=0, i <= id.length, i++){
  let response = $.post(url, {id}) ;
  result.push(response);
}

但是會發現這樣只會返回一個訊息,是因為JS本分為非同步處理的方式,當你發第一個請求時,他不會等回應回來才發第二個請求,JS會連續發送,這就是非同步請求。所以會造成不管如何都是會返回一個訊息。

要處理這種非同步請求的方法有許多種,你可以把它改成同步請求,用async/await,或是用axios.all() 處理!

Axios.all()

透過利用axios.allaxis.spread你可以一次送出全部的請求,及處理蒐集回來的請求。

  • axios.all:放入你全部的請求。若是有個陣列, 我們一樣可以用map方式處理。
  • axios.spread():放入回傳的請求。

假設目前有很多產品,你需要透過API逐步的更新每個產品的狀態,程式碼如下處理:

//例子是用Vue.js
export default {
  data(){
    return{
      products = [];
    }
  }, 
  methods:{
    update(){
      axios.all(productIds.map(product_id => {
          axios.post(url, {product_id, status})
      }))
      .then(axios.spread((...res) => {//這邊用ES6 的spread operator
        this.products = _.map(res,'data')
      }));
    }
  }
}

這樣就可以輕鬆的實作Multi Request了!

註一.至於原理的部份,因為axios在傳送時都是用Promise這個物件,又可以另開一個文章了…所以這邊就先詳細介紹這個物件在做什麼的,有興趣的人可以在繼續鑽研喔!

註二.async/await的相關運用可能另外找時間再談談看!