axios同時調用多個接口后處理數據，axios.all調用動態循環請求（附上promise.all）

當我們需要調用多個接口，然后在這些接口都調用完成后進行某些操作，以及循環調用n個接口時，axios.all能幫我們很好的實現這個業務需求

先看看axios官網對axios.all的用法：

 簡單來寫就是：

 

 然后介紹一下實際業務中的使用方法：

 //  業務模擬：現在需要調用一個接口多次，當碰到接口返回值為'ok'的時候，停止調用
    let idArr = [1, 2, 3];
    let urlArr = idArr.map(element =>
      axios.get('/api/test?query=' + element)
    );
    // console.log(urlArr)
    let num = 0;
    axios.all(urlArr)
      .then(axios.spread((...arg) => {
        // 請求現在都執行完成
        Array.from([...arg]).forEach((element, index) => {
          //這里可以查看每個請求的返回數據 console.log(element)
          //通過num === 0判斷是否是第一次進入if條件
          if (element.data === 'ok' && num === 0) {
　　　　　　　 num+=1;
            console.log(1)
          }
        })
      }));

上面假設三個接口第一個返回是'ok',第二個返回‘no’，第三個返回'ok'；

1. 當執行第一個接口時，進入if判斷，打印一次1
2. 當執行第二個接口時，不是返回ok，不進入if語句，所以不打印
3. 當執行第三個接口時,返回ok，但是num不等於0，所以不進入if語句,不打印

 promise.all業務模擬：多個form表單驗證

 Promise.all([
      this.$refs.ruleForm.validate(),
      this.$refs.supplierForm.validate()
    ]).then(() => {
      console.log('全部驗證成功')
    }).catch(() => { console.log('error submit!!'); return false; });