Promise物件all與race方法手寫範例

2022-12-11 14:01:00

前言

在理解了手寫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方法的資料請關注it145.com其它相關文章！

Promise物件all與race方法手寫範例

目錄

前言

Promise.all

介紹

手寫

Promise.race

介紹

手寫

熱門文章