Promise對(duì)象all與race方法手寫(xiě)示例
前言
在理解了手寫(xiě)promsie.then
的方法后,再來(lái)看它的其他方法,感覺(jué)真的簡(jiǎn)單了不少。
Promise.all
介紹
Promise.all()
方法用于將多個(gè) Promise 實(shí)例,包裝成一個(gè)新的 Promise 實(shí)例。
const p = Promise.all([p1, p2, p3]);
上面代碼中,Promise.all()
方法接受一個(gè)數(shù)組作為參數(shù),p1
、p2
、p3
都是 Promise 實(shí)例。另外,Promise.all()
方法的參數(shù)可以不是數(shù)組,但必須具有 Iterator 接口,且返回的每個(gè)成員都是 Promise 實(shí)例。
p
的狀態(tài)由p1
、p2
、p3
決定,分成兩種情況。
(1)只有p1
、p2
、p3
的狀態(tài)都變成fulfilled
,p
的狀態(tài)才會(huì)變成fulfilled
,此時(shí)p1
、p2
、p3
的返回值組成一個(gè)數(shù)組,傳遞給p
的回調(diào)函數(shù)。
(2)只要p1
、p2
、p3
之中有一個(gè)被rejected
,p
的狀態(tài)就變成rejected
,此時(shí)第一個(gè)被reject
的實(shí)例的返回值,會(huì)傳遞給p
的回調(diào)函數(shù)。
手寫(xiě)
- 返回一個(gè)
Promsie
對(duì)象
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ù)組中每個(gè)元素是否為
Promsie
對(duì)象的實(shí)例,并對(duì)此分情況處理
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è)置一個(gè)計(jì)數(shù)器
count
,當(dāng)遍歷完了所有數(shù)組里面的值,就把result
數(shù)組打印出來(lái)
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()
方法同樣是將多個(gè) Promise 實(shí)例,包裝成一個(gè)新的 Promise 實(shí)例。
const p = Promise.race([p1, p2, p3]);
上面代碼中,只要p1
、p2
、p3
之中有一個(gè)實(shí)例率先改變狀態(tài),p
的狀態(tài)就跟著改變。那個(gè)率先改變的 Promise 實(shí)例的返回值,就傳遞給p
的回調(diào)函數(shù)。
手寫(xiě)
- 返回一個(gè)
Promise
對(duì)象
let promiseRace = (array) => { return new Promise((resolve, reject) => { }) }
- 判斷傳入的參數(shù)是否為數(shù)組
let promiseRace = (array) => { if (!Array.isArray(array)) { throw new Error('要返回?cái)?shù)組') } return new Promise((resolve, reject) => { }) }
- 遍歷數(shù)組,再判斷數(shù)組中每個(gè)元素是否為
Promsie
對(duì)象的實(shí)例,再對(duì)此分情況處理
let promiseRace = (array) => { if (!Array.isArray(array)) { throw new Error('要返回?cái)?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 對(duì)象 - Promise.any()
以上就是Promise對(duì)象all與race方法手寫(xiě)示例的詳細(xì)內(nèi)容,更多關(guān)于Promise對(duì)象all race方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js showModalDialog參數(shù)的使用詳解
本篇文章主要是對(duì)js中showModalDialog參數(shù)的使用進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01ES6知識(shí)點(diǎn)整理之Proxy的應(yīng)用實(shí)例詳解
這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之Proxy的應(yīng)用,結(jié)合實(shí)例形式詳細(xì)分析了ES6中Proxy的功能、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-04-04uniapp存儲(chǔ)數(shù)據(jù)到本地文件及讀取本地文件數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關(guān)于uniapp存儲(chǔ)數(shù)據(jù)到本地文件及讀取本地文件數(shù)據(jù)的相關(guān)資料,在開(kāi)發(fā)uniapp應(yīng)用時(shí),我們常常需要使用本地存儲(chǔ)來(lái)保存一些數(shù)據(jù),比如用戶(hù)登錄信息、設(shè)置項(xiàng)等,本文通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09javascript ajax 仿百度分頁(yè)函數(shù)
百度分頁(yè)想必大家都知道吧,瀏覽網(wǎng)頁(yè)的朋友都應(yīng)該知道,下面有個(gè)小例子使用到了js、ajax等來(lái)模仿百度的分頁(yè),感興趣的朋友可以參考下2013-10-10js鼠標(biāo)經(jīng)過(guò)tab選項(xiàng)卡時(shí)實(shí)現(xiàn)切換延遲
這篇文章主要為大家詳細(xì)介紹了js鼠標(biāo)經(jīng)過(guò)tab選項(xiàng)卡時(shí)實(shí)現(xiàn)切換延遲效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JavaScript實(shí)現(xiàn)多個(gè)物體同時(shí)運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)多個(gè)物體同時(shí)運(yùn)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03