一、Pomise.all的使用
Promise.all可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise實(shí)例登刺。同時(shí)卢厂，成功和失敗的返回值是不同的，成功的時(shí)候返回的是一個(gè)結(jié)果數(shù)組河劝，而失敗的時(shí)候則返回最先被reject失敗狀態(tài)的值壁榕。
具體代碼如下：
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
let p3 = Promse.reject('失敗')
Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功了', 'success']
}).catch((error) => {
console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 失敗了，打出 '失敗'
})
Promse.all在處理多個(gè)異步處理時(shí)非常有用赎瞎，比如說一個(gè)頁面上需要等兩個(gè)或多個(gè)ajax的數(shù)據(jù)回來以后才正常顯示牌里，在此之前只顯示loading圖標(biāo)。
代碼模擬：
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獲得的成功結(jié)果的數(shù)組里面的數(shù)據(jù)順序和Promise.all接收到的數(shù)組順序是一致的牡辽，即p1的結(jié)果在前喳篇，即便p1的結(jié)果獲取的比p2要晚。這帶來了一個(gè)絕大的好處：在前端開發(fā)請求數(shù)據(jù)的過程中态辛，偶爾會(huì)遇到發(fā)送多個(gè)請求并根據(jù)請求順序獲取和使用數(shù)據(jù)的場景麸澜，使用Promise.all毫無疑問可以解決這個(gè)問題。
二因妙、Promise.race的使用
顧名思義痰憎，Promse.race就是賽跑的意思，意思就是說攀涵，Promise.race([p1, p2, p3])里面哪個(gè)結(jié)果獲得的快铣耘，就返回那個(gè)結(jié)果，不管結(jié)果本身是成功狀態(tài)還是失敗狀態(tài)以故。
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
},1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('failed')
}, 500)
})
Promise.race([p1, p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 打開的是 'failed'
})
原理是挺簡單的蜗细，但是在實(shí)際運(yùn)用中還沒有想到什么的使用場景會(huì)使用到。
