Promise對象all與race方法手寫示例
前言
在理解了手寫promsie.then
的方法后,再來看它的其他方法,感覺真的簡單了不少。
Promise.all
介紹
Promise.all()
方法用于將多個 Promise 實例,包裝成一個新的 Promise 實例。
const p = Promise.all([p1, p2, p3]);
上面代碼中,Promise.all()
方法接受一個數(shù)組作為參數(shù),p1
、p2
、p3
都是 Promise 實例。另外,Promise.all()
方法的參數(shù)可以不是數(shù)組,但必須具有 Iterator 接口,且返回的每個成員都是 Promise 實例。
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
的實例的返回值,會傳遞給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
對象的實例,并對此分情況處理
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 實例,包裝成一個新的 Promise 實例。
const p = Promise.race([p1, p2, p3]);
上面代碼中,只要p1
、p2
、p3
之中有一個實例率先改變狀態(tài),p
的狀態(tài)就跟著改變。那個率先改變的 Promise 實例的返回值,就傳遞給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
對象的實例,再對此分情況處理
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方法手寫示例的詳細內(nèi)容,更多關(guān)于Promise對象all race方法的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js showModalDialog參數(shù)的使用詳解
本篇文章主要是對js中showModalDialog參數(shù)的使用進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01uniapp存儲數(shù)據(jù)到本地文件及讀取本地文件數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關(guān)于uniapp存儲數(shù)據(jù)到本地文件及讀取本地文件數(shù)據(jù)的相關(guān)資料,在開發(fā)uniapp應(yīng)用時,我們常常需要使用本地存儲來保存一些數(shù)據(jù),比如用戶登錄信息、設(shè)置項等,本文通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09js鼠標經(jīng)過tab選項卡時實現(xiàn)切換延遲
這篇文章主要為大家詳細介紹了js鼠標經(jīng)過tab選項卡時實現(xiàn)切換延遲效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03