async/await實現(xiàn)Promise.all()的方式
更新時間：2022年12月19日 09:01:06 作者：不叫貓先生
Promise.all() 方法接收一個 promise 的 iterable 類型的輸入，并且只返回一個Promise實例，并且輸入的所有 promise 的 resolve 回調的結果是一個數(shù)組，對async/await實現(xiàn)Promise.all()相關知識感興趣的朋友一起看看吧
一、Promise.all()簡介
Promise.all() 方法接收一個 promise 的 iterable 類型（注：Array，Map，Set 都屬于 ES6 的 iterable 類型）的輸入，并且只返回一個Promise實例，并且輸入的所有 promise 的 resolve 回調的結果是一個數(shù)組。
- Promise的 resolve 回調執(zhí)行是在所有輸入的 promise 的 resolve 回調都結束，或者輸入的 iterable 里沒有 promise 了的時候
- Promise的 reject 回調執(zhí)行是只要任何一個輸入的 promise 的 reject 回調執(zhí)行或者輸入不合法的 promise 就會立即拋出錯誤，并且只要有 reject 就會立即拋出的錯誤信息。
二、async/await實現(xiàn)Promise.all()
先定義三個Promise實例對象，并放置于一個數(shù)組中
let a = new Promise((res, rej) => {
res(1)
}).catch(err => console.log(err))
let b = new Promise((res, rej) => {
setTimeout(() => {
rej(2)
}, 2000)
}).catch(err => console.log(err))
let c = new Promise((res, rej) => {
res(3)
}).catch(err => console.log(err))
const arr = [a, b, c]1、方式一
-使用async/await，循環(huán)遍歷Promise實例對象的數(shù)組，并把每個Promise對象的結果放置于一個空數(shù)組中。
async function bb() {
let arr1 = [];
try {
for (let i = 0; i < arr.length; i++) {
let h = await arr[i]
arr1.push(h)
}
} catch (err) {
}
return arr1
}
bb().then(res => {
console.log(res); //[1, undefined, 3]
});undefined是因為await只處理成功時resolve()，不處理失敗異常，故返回undefined
2、方式二
該方面類似實現(xiàn)手寫Promise.acll()，等await拿到Promise結果然后count加1，知道count的數(shù)值等于數(shù)值的長度在resolve()
const all = (arr) => {
return new Promise((resolve, reject) => {
let length = arr && arr.length
let count = 0
let result = []
if (!arr || arr.length === 0) {
resolve(result)
}
arr.forEach(async (item, index) => {
try {
const res = await item
result[index] = res
count++
if (count === length ) {
resolve(result)
}
} catch (err) {
reject(err)
}
});
})
}
三、async/await與Promise.all()結合使用
因為Promise.all()返回的也是Promise，所以await 后面可以跟Promise.all()
function fn() {
return new Promise((resolve, reject) => {
resolve(Math.random())
})
}
async function asyncFunc() {
let result
try {
result = await Promise.all([fn(), fn()])
console.log(result)
} catch (err) {
console.log(err, 'err')
}
return result
}
asyncFunc().then(res => { console.log(res, 'res') })到此這篇關于async/await實現(xiàn)Promise.all()的文章就介紹到這了,更多相關async/await實現(xiàn)Promise.all()內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了js仿360開機效果，并且封裝一個帶回調函數(shù)的緩動動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
layui 實現(xiàn)加載動畫以及非真實加載進度的方法
今天小編就為大家分享一篇layui 實現(xiàn)加載動畫以及非真實加載進度的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了小程序退出頁面時清除定時器，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
在Web開發(fā)中,處理圖片、字體等資源文件是一個常見的需求,傳統(tǒng)的做法是將這些資源文件放在靜態(tài)目錄中,然后在HTML或CSS中引用,然而,這種方法在構建工具（如Webpack）中并不總是最理想的,為了解決這個問題,可以使用url-loader,需要的朋友可以參考下2025-04-04
主要是window.onscroll的運用2009-02-02
sortable中el-table拖拽及點擊箭頭上下移動row效果
這篇文章主要介紹了sortable中el-table拖拽及點擊箭頭上下移動row效果,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了JSONP和批量操作功能的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要給大家介紹了關于JavaScript中AOP的實現(xiàn)與應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
生命周期是指一個對象從創(chuàng)建→>運行>銷毀的整個階段，強調的是一個時間段，文中介紹了生命周期的分類和微信小程序應用，需要的朋友可以參考下2022-08-08
javascript fullscreen全屏實現(xiàn)代碼
用了實現(xiàn)打開一個滿屏的代碼2009-04-04