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的回調函數(shù)。
(2)只要p1、p2、p3之中有一個被rejected,p的狀態(tài)就變成rejected,此時第一個被reject的實例的返回值,會傳遞給p的回調函數(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ù)器
count,當遍歷完了所有數(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的回調函數(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方法手寫示例的詳細內容,更多關于Promise對象all race方法的資料請關注腳本之家其它相關文章!
相關文章
JavaScript實現(xiàn)網頁動態(tài)生成表格
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網頁動態(tài)生成表格,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11
javascript如何動態(tài)加載表格與動態(tài)添加表格行
在某些時候需要動態(tài)加載表格與動態(tài)添加表格行,在接下來的文章中將為大家介紹下javascript是如何做到的,感興趣的朋友不要錯過2013-11-11
jQuery和JavaScript節(jié)點插入元素的方法對比
本文主要介紹jQuery與JavaScript節(jié)點的插入方法,以及他們的具體代碼實現(xiàn)方法,大家可以對比下他們之間的不同,希望對大家編寫代碼有所幫助2016-11-11

