VUE中使用promise. all發送多個請求

vue中使用promise.all發送多個請求
1.建立兩個promise,在promise中使用axios
2.調用Promise.all([p1,p2]).then(res=>{}).catch(err=>{})方法

Promse.all在處理多個異步處理時很是有用，好比說一個頁面上須要等兩個或多個ajax的數據回來之後才正常顯示，在此以前只顯示loading圖標。

代碼模擬：

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒後醒來`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒後醒來', '2秒後醒來' ]
}).catch((error) => {
  console.log(error)
})

 

Promise.all 生成並返回一個新的 Promise 對象，因此它能夠使用 Promise 實例的全部方法。參數傳遞promise數組中全部的 Promise 對象都變爲resolve的時候，該方法纔會返回， 新建立的 Promise 則會使用這些 promise 的值。

須要特別注意的是，Promise.all得到的成功結果的數組裏面的數據順序和Promise.all接收到的數組順序是一致的，即p1的結果在前，即使p1的結果獲取的比p2要晚。這帶來了一個絕大的好處：在前端開發請求數據的過程當中，偶爾會遇到發送多個請求並根據請求順序獲取和使用數據的場景，使用Promise.all毫無疑問能夠解決這個問題。