Promise對象all與race方法手寫示例
前言
在理解了手寫promsie.then的方法后,再來看它的其他方法,感覺真的簡單了不少。
Promise.all
介紹
Promise.all()方法用于將多個 Promise 實(shí)例,包裝成一個新的 Promise 實(shí)例。
const p = Promise.all([p1, p2, p3]);
上面代碼中,Promise.all()方法接受一個數(shù)組作為參數(shù),p1、p2、p3都是 Promise 實(shí)例。另外,Promise.all()方法的參數(shù)可以不是數(shù)組,但必須具有 Iterator 接口,且返回的每個成員都是 Promise 實(shí)例。
p的狀態(tài)由p1、p2、p3決定,分成兩種情況。
(1)只有p1、p2、p3的狀態(tài)都變成fulfilled,p的狀態(tài)才會變成fulfilled,此時p1、p2、p3的返回值組成一個數(shù)組,傳遞給p的回調(diào)函數(shù)。
(2)只要p1、p2、p3之中有一個被rejected,p的狀態(tài)就變成rejected,此時第一個被reject的實(shí)例的返回值,會傳遞給p的回調(diào)函數(shù)。
手寫
- 返回一個
Promsie對象
const promiseAll = (array) => {
return new Promise((resolve, reject) => {
})
}
- 判斷傳入的是數(shù)組
const promiseAll = (array) => {
if (!Array.isArray(array)) {
throw new Error('要傳入數(shù)組')
}
return new Promise((resolve, reject) => {
}
}
- 遍歷數(shù)組,再判斷數(shù)組中每個元素是否為
Promsie對象的實(shí)例,并對此分情況處理
const promiseAll = (array) => {
if (!Array.isArray(array)) {
throw new Error('要傳入數(shù)組')
}
return new Promise((resolve, reject) => {
let result = [];
array.forEach((item, index) => {
if (item instanceof Promise) {
item.then(res => {
result[index] = res
},
err => { return reject(err) })
} else {
result[index] = item
}
})
})
}
- 設(shè)置一個計數(shù)器
count,當(dāng)遍歷完了所有數(shù)組里面的值,就把result數(shù)組打印出來
const promiseAll = (array) => {
if (!Array.isArray(array)) {
throw new Error('要傳入數(shù)組')
}
return new Promise((resolve, reject) => {
let result = [];
let count = 0;
array.forEach((item, index) => {
if (item instanceof Promise) {
item.then(res => {
result[index] = res
count++;
if (count == array.length) {
return resolve(result)
}
},
err => { return reject(err) })
} else {
result[index] = item
count++;
if (count == array.length) {
return resolve(result)
}
}
})
})
}
Promise.race
介紹
Promise.race()方法同樣是將多個 Promise 實(shí)例,包裝成一個新的 Promise 實(shí)例。
const p = Promise.race([p1, p2, p3]);
上面代碼中,只要p1、p2、p3之中有一個實(shí)例率先改變狀態(tài),p的狀態(tài)就跟著改變。那個率先改變的 Promise 實(shí)例的返回值,就傳遞給p的回調(diào)函數(shù)。
手寫
- 返回一個
Promise對象
let promiseRace = (array) => {
return new Promise((resolve, reject) => {
})
}
- 判斷傳入的參數(shù)是否為數(shù)組
let promiseRace = (array) => {
if (!Array.isArray(array)) {
throw new Error('要返回數(shù)組')
}
return new Promise((resolve, reject) => {
})
}
- 遍歷數(shù)組,再判斷數(shù)組中每個元素是否為
Promsie對象的實(shí)例,再對此分情況處理
let promiseRace = (array) => {
if (!Array.isArray(array)) {
throw new Error('要返回數(shù)組')
}
return new Promise((resolve, reject) => {
array.forEach((item) => {
if (item instanceof Promise) {
item.then(res => {
return resolve(res)
},
err => reject(err))
} else {
return resolve(item)
}
})
})
}
參考文檔
以上就是Promise對象all與race方法手寫示例的詳細(xì)內(nèi)容,更多關(guān)于Promise對象all race方法的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
javascript中xml操作實(shí)現(xiàn)代碼
好久沒寫了。感覺今時今日,HTML5 還依然只是一種玩票的東東。但愿 w3c 的標(biāo)準(zhǔn)可以早一點(diǎn)出臺,不要讓各種瀏覽器的兼容問題和支持程度搞死2011-11-11
JavaScript實(shí)現(xiàn)網(wǎng)頁動態(tài)生成表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁動態(tài)生成表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11
javascript如何動態(tài)加載表格與動態(tài)添加表格行
在某些時候需要動態(tài)加載表格與動態(tài)添加表格行,在接下來的文章中將為大家介紹下javascript是如何做到的,感興趣的朋友不要錯過2013-11-11
JavaScript實(shí)現(xiàn)瀑布流圖片效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)瀑布流圖片效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
詳解使用Next.js構(gòu)建服務(wù)端渲染應(yīng)用
這篇文章主要介紹了詳解使用Next.js構(gòu)建服務(wù)端渲染應(yīng)用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
web頁面和微信小程序頁面實(shí)現(xiàn)瀑布流效果
這篇文章主要介紹了web頁面和微信小程序頁面實(shí)現(xiàn)瀑布流效果,本文通過實(shí)例代碼圖文介紹,給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
jQuery和JavaScript節(jié)點(diǎn)插入元素的方法對比
本文主要介紹jQuery與JavaScript節(jié)點(diǎn)的插入方法,以及他們的具體代碼實(shí)現(xiàn)方法,大家可以對比下他們之間的不同,希望對大家編寫代碼有所幫助2016-11-11

