前言
大家好，我是林三心， 用最通俗易懂的話講最難的知識點 是我的座右銘， 基礎是進階的前提 是我的初心
背景
咱們在開發中，大多數時間都是一個異步操作一個異步操作去執行的，但是有一些特殊情況，需要一股腦去執行多個異步操作，比如：
多表單校驗：只有所有表單都校驗透過才能送出
多介面請求：只有所有介面都請求成功才能進行下一步操作
這時候就可以用到
Promise.all
這個方法了
Promise.all
基本特性
簡單說說這個方法的使用或特性吧：
接收一個 Promise 陣列，執行結果返回一個新的 Promise
所有 Promise 都成功的時候，返回的 Promise 才是成功
要是有一個 Promise 失敗，則返回的 Promise 是失敗
基本使用
// 模擬異步操作
const request = (delay, flag = true) => {
returnnewPromise((resolve, reject) => {
setTimeout(() => {
if (flag) {
resolve(`成功了${delay}`)
} else {
reject(`失敗了${delay}`)
}
}, delay)
})
}
const fun = async (promises) => {
Promise.all(promises)
.then(res => {
console.log('res', res)
})
.catch(error => {
console.log('error', error)
})
}
fun([request(1000), request(500)])
// res [ '成功了1000', '成功了500' ]
fun([request(1000), request(500, false)])
// error 失敗了500
問題
Promise.all
還是很好用的，但是問題來了，其中有一個錯誤的話，就只會輸出這個失敗的值，而忽略了其他成功的值，那咋辦呢？我們需要自己去收集才行：
const fun = async (promises) => {
Promise.all(
promises.map(promise => {
return promise.catch(err => err)
})
)
.then(res => {
console.log('res', res)
})
}
fun([request(1000), request(500, false)])
// res [ '成功了1000', '失敗了500' ]
Promise.allSettled
其實在
ES2020
中，JavaScript提供了一個新語法
Promise.allSettled
，他能直接完成我們上面所做的處理：
接收一個 Promise 陣列，執行結果返回一個成功的 Promise
返回 Promise 狀態為成功
返回 Promise 的值是一個陣列
const fun = async (promises) => {
Promise.allSettled(promises)
.then(res => {
console.log('res', res)
})
}
fun([request(1000), request(500, false)])
// res [
// { status: 'fulfilled', value: '成功了1000' },
// { status: 'rejected', reason: '失敗了500' }
// ]
結語
點個【贊】和【在看】是對林三心最大的鼓勵，林三心會非常開心的~~~
關註公眾號【前端之神】，回復【加群】，即可獲得加入【千人前端學習大群】的方式
