前言
Promise 是 es6 新出的語(yǔ)法变姨，用來(lái)處理異步請(qǐng)求，解決之前沒(méi)有 Promise 時(shí)的回調(diào)地獄森逮。Promise 有幾個(gè)api, Promise.resolve,Promise.reject,Promise.all,Promise.race荤堪。關(guān)于多個(gè)異步的處理我們可以用 Promise.all，但 Promise.all 只在所有的 promise 都 resolve 時(shí)才會(huì)調(diào)用 .then 中的成功回調(diào)潭兽。 有時(shí)候多個(gè)請(qǐng)求難免會(huì)有失敗的情況，我們想當(dāng) Promise.all中的 promise 對(duì)象 reject 失敗時(shí)也能夠調(diào)用回調(diào)函數(shù)斗遏，這個(gè)時(shí)候應(yīng)該怎么做呢山卦？
開(kāi)搞
我們先來(lái)了解下 Promise.all 的用法。
Promise.all([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)])
.then(res => console.log(res),err=>console.log(err))
// [1, 2, 3]
Promise.all([Promise.reject(1), Promise.resolve(2), Promise.resolve(3)])
.then(res => console.log(res),err=>console.log(err))
// 1
Promise.all 中傳入的是多個(gè) promise 對(duì)象組成的數(shù)組诵次。數(shù)組中所有的 promise 成功時(shí)才會(huì)打印 res 账蓉，只要有一個(gè)失敗就會(huì)打印 err 枚碗。
我們想要達(dá)到就算失敗也能打印所有的信息，應(yīng)該怎么做呢铸本？很簡(jiǎn)單肮雨，用.then 因?yàn)?code>.then返回的也是一個(gè) promise 對(duì)象，不管是resolve還是reject都會(huì)執(zhí)行.then箱玷。返回promise對(duì)象后就變成resovle狀態(tài)了怨规。
Promise.all([Promise.reject(1).then((res) => ({ status: 'ok', res }), (err) => ({ status: 'not ok', err })),
Promise.resolve(2).then((res) => ({ status: 'ok', res }), (err) => ({ status: 'not ok', err })),
Promise.resolve(3).then((res) => ({ status: 'ok', res }), (err) => ({ status: 'not ok', err }))])
.then(res => console.log(res),err=>console.log(err))
//[ {status: "not ok", err: 1},{status: "ok", res: 2},{status: "ok", res: 3}]
這樣就打印出了所有的信息，即便Promise.all中有reject狀態(tài)锡足。
優(yōu)化封裝
現(xiàn)在這種寫(xiě)法很繁瑣椅亚，每個(gè)數(shù)組中的每個(gè)promise都要寫(xiě)同樣的.then。我們可以把.then抽離出來(lái)舱污。封裝成一個(gè)函數(shù)，然后用map方法,對(duì)每個(gè)promise .then一下弥虐，然后返回新的數(shù)組扩灯。
function handlePromise(promiseList) {
return promiseList.map(promise =>
promise.then((res) => ({ status: 'ok', res }), (err) => ({ status: 'not ok', err }))
)
}
這樣調(diào)用promise.all時(shí)，可以這么寫(xiě):
Promise.all(handlePromise([Promise.reject(1),Promise.resolve(2),Promise.resolve(3)]))
.then(res => console.log(res),err=>console.log(err))
也是同樣的效果霜瘪。
甚至我們可以寫(xiě)一個(gè)Promise.allSettled方法:
Promise.allSettled2 = function (promiseList) {
return Promise.all(handlePromise(promiseList))
}
Promise.allSettled2 ([Promise.reject(1),Promise.resolve(2),Promise.resolve(3)]).then(res => console.log(res), err => console.log(err))
這就是promise新出的allSettled Api`珠插，只不過(guò)兼容性不太好，不過(guò)沒(méi)事颖对，看了這篇文章之后捻撑，我們可以自己封裝個(gè)一樣功能的api了。完結(jié)撒花缤底。
