Promise對象all與race方法手寫示例
前言
在理解瞭手寫promsie.then
的方法後,再來看它的其他方法,感覺真的簡單瞭不少。
Promise.all
介紹
Promise.all()
方法用於將多個 Promise 實例,包裝成一個新的 Promise 實例。
const p = Promise.all([p1, p2, p3]);
上面代碼中,Promise.all()
方法接受一個數組作為參數,p1
、p2
、p3
都是 Promise 實例。另外,Promise.all()
方法的參數可以不是數組,但必須具有 Iterator 接口,且返回的每個成員都是 Promise 實例。
p
的狀態由p1
、p2
、p3
決定,分成兩種情況。
(1)隻有p1
、p2
、p3
的狀態都變成fulfilled
,p
的狀態才會變成fulfilled
,此時p1
、p2
、p3
的返回值組成一個數組,傳遞給p
的回調函數。
(2)隻要p1
、p2
、p3
之中有一個被rejected
,p
的狀態就變成rejected
,此時第一個被reject
的實例的返回值,會傳遞給p
的回調函數。
手寫
- 返回一個
Promsie
對象
const promiseAll = (array) => { return new Promise((resolve, reject) => { }) }
- 判斷傳入的是數組
const promiseAll = (array) => { if (!Array.isArray(array)) { throw new Error('要傳入數組') } return new Promise((resolve, reject) => { } }
- 遍歷數組,再判斷數組中每個元素是否為
Promsie
對象的實例,並對此分情況處理
const promiseAll = (array) => { if (!Array.isArray(array)) { throw new Error('要傳入數組') } 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 } }) }) }
- 設置一個計數器
count
,當遍歷完瞭所有數組裡面的值,就把result
數組打印出來
const promiseAll = (array) => { if (!Array.isArray(array)) { throw new Error('要傳入數組') } 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
之中有一個實例率先改變狀態,p
的狀態就跟著改變。那個率先改變的 Promise 實例的返回值,就傳遞給p
的回調函數。
手寫
- 返回一個
Promise
對象
let promiseRace = (array) => { return new Promise((resolve, reject) => { }) }
- 判斷傳入的參數是否為數組
let promiseRace = (array) => { if (!Array.isArray(array)) { throw new Error('要返回數組') } return new Promise((resolve, reject) => { }) }
- 遍歷數組,再判斷數組中每個元素是否為
Promsie
對象的實例,再對此分情況處理
let promiseRace = (array) => { if (!Array.isArray(array)) { throw new Error('要返回數組') } 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 對象 – Promise.any()
以上就是Promise對象all與race方法手寫示例的詳細內容,更多關於Promise對象all race方法的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 字節飛書面試promise.all實現示例
- 面試手寫實現Promise.all
- 前端JavaScript之Promise
- Promise靜態四兄弟實現示例詳解
- 徹底搞懂 javascript的Promise