萬字詳解JavaScript手寫一個Promise

更新時間：2022年07月13日 16:46:57 作者：??一碗周?

這篇文章主要介紹了萬字詳解JavaScript手寫一個Promise，Promise就是一個類，在執(zhí)行這個類的時候，需要傳遞一個執(zhí)行器(回調函數)進去，執(zhí)行器會立即執(zhí)行

前言

手寫Promise現在已經成了面試的熱門內容，但在實際開發(fā)中基本都不會去手寫一個Promise，但是在面試中各種手寫題可能就會遇到一個手寫Promise，我們可以盡量提高我們的上限，從而獲取更多的工作機會。

Promise核心原理實現

首先我們從使用的角度來分析一下Promise，然后編寫一個最簡單版本的Promise。

Promise的使用分析

Promise就是一個類，在執(zhí)行這個類的時候，需要傳遞一個執(zhí)行器(回調函數)進去，執(zhí)行器會立即執(zhí)行。

Promise中的狀態(tài)分為三個，分別是：

pending→等待
fulfilled→成功
rejected→失敗

狀態(tài)的切換只有兩種，分別是：

pending→fulfilled
pending→rejected

一旦狀態(tài)發(fā)生改變，就不會再次改變：

執(zhí)行器中的兩個參數，分別是resolve和reject，其實就是兩個回調函數，調用resolve是從pending狀態(tài)到fulfilled，調用reject是從狀態(tài)pending到rejected。傳遞給這兩個回調函數的參數會作為成功或失敗的值。
Promise的實例對象具有一個then方法，該方法接受兩個回調函數，分別來處理成功與失敗的狀態(tài)，then方法內部會進行判斷，然后根據當前狀態(tài)確定調用的回調函數。then方法應該是被定義在原型對象中的。
then的回調函數中都包含一個值，如果是成功，表示成功后返回的值；如果是失敗就表示失敗的原因。

MyPromise的實現

根據我們上面的分析，寫出如下代碼：

MyPromise.js
// 定義所有狀態(tài)的常量
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
// Promise實質上就是一個類，首先創(chuàng)建一個Promise的類
class MyPromise {
    // 實例化Promise時需要一個回調函數，該回調函數立即執(zhí)行
    constructor(executor) {
        // 在調用executor需要傳遞兩個回調函數，分別是resolve和reject
        executor(this.resolve, this.reject)
    }
    // Promise 的狀態(tài)
    status = PENDING
    // 記錄成功與失敗的值
    value = undefined
    reason = undefined
    resolve = (value) => {// 這里使用箭頭函數是為了使其內部的this指向為該實例化后的對象
        // 形參value表示，調用resolve時傳遞的參數
        // 如果當前狀態(tài)不是pending，就直接跳出該邏輯
        if (this.status !== PENDING) return

        // 將狀態(tài)修改為成功
        this.status = FULFILLED

        // 將傳入的值進行保存
        this.value = value
    }
    reject = (reason) => {// 這里使用箭頭函數是為了使其內部的this指向為該實例化后的對象
        // 形參reason表示，調用reject時傳遞的失敗的原因
        // 如果當前狀態(tài)不是pending，就直接跳出該邏輯
        if (this.status !== PENDING) return

        // 將狀態(tài)修改為失敗
        this.status = REJECTED

        // 保存失敗的原因
        this.reason = reason
    }
    // then方法的實現
    then (onFulfilled, onRejected) {
        // 判斷當前狀態(tài),根據狀態(tài)調用指定回調
        if (this.status === FULFILLED) {
            // 將成功的值作為參數返回
            onFulfilled(this.value)
        } else if (this.status === REJECTED) {
            // 將失敗的原因作為參數返回
            onRejected(this.reason)
        }
    }
}
// 導出Promise
module.exports = MyPromise

現在我們就來寫一段代碼驗證一下上面的代碼

驗證resolve：

const MyPromise = require('./myPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})
promise.then(value => {
    console.log(value);
}, reason => {
    console.log(reason);
})
/* 輸出
    成功
*/

驗證reject：

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
    reject('失敗')
})
promise.then(value => {
    console.log(value);
}, reason => {
    console.log(reason);
})
/* 輸出
    失敗
*/

驗證狀態(tài)不可變：

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
    reject('失敗')
})
promise.then(value => {
    console.log(value);
}, reason => {
    console.log(reason);
})
/* 輸出
    成功
*/

在Promise中加入異步操作

如果我們的代碼中存在異步操作，我們自己寫的Promise將毫無用處，

例如下面這段代碼：

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
    setTimeout(resolve, 2000, '成功')
})
promise.then(value => {
    console.log(value);
}, reason => {
    console.log(reason);
})

這段代碼2000ms后沒有任何輸出，為了解決這個問題我們將對自己編寫的類進行如下操作：

創(chuàng)建兩個實例方法用于存儲我們傳入的成功與失敗的處理邏輯。
為then方法添加狀態(tài)為pending時的處理邏輯，這時將傳遞進來的屬性保存到實例上。
在成功或者失敗時調用相應的傳遞進來的回調函數(實例屬性存在函數的情況下)。

實現代碼如下：

// MyPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }
    status = PENDING
    value = undefined
    reason = undefined
    // 存儲成功與失敗的處理邏輯
    onFulfilled = undefined
    onRejected = undefined
    resolve = (value) => {
        if (this.status !== PENDING) return
        this.status = FULFILLED
        this.value = value
        // 如果將狀態(tài)修復為成功，調用成功的回調
        this.onFulfilled && this.onFulfilled(this.value)
    }
    reject = (reason) => {
        if (this.status !== PENDING) return
        this.status = REJECTED
        this.reason = reason
        // 如果將狀態(tài)修復為失敗，調用失敗的回調
        this.onRejected && this.onRejected(this.reason)
    }
    then (onFulfilled, onRejected) {
        if (this.status === FULFILLED) {
            onFulfilled(this.value)
        } else if (this.status === REJECTED) {
            onRejected(this.reason)
        } else {
            // 表示既不是成功，也不是失敗。這個時候保存?zhèn)鬟f進來的兩個回調
            this.onFulfilled = onFulfilled
            this.onRejected = onRejected
        }
    }
}
module.exports = MyPromise

這里的this.onFulfilled && this.onFulfilled(this.value)表示如果該屬性存在就調用這個方法。

現在我們重新執(zhí)行一開始上面那一段代碼，2s后會成功輸出成功。

實現then方法的多次調用

Promise實例中存在要給then方法，允許我們在Promise實例中鏈式調用，每個then方法還會返回一個Promise實例，

如下圖所示：

Promise實例方法then是可以多次進行調用，而我們現在自己封裝的卻執(zhí)行調用一次，現在根據新需要來重新改寫我們的代碼，

實現思路如下：

定義可以存儲多個回調的數組，用于存儲多個回調函數。
如果是同步執(zhí)行的代碼，執(zhí)行后立即知道執(zhí)行結果，所以可以直接調用回調函數。
如果是異步代碼，需要將每次回調函數保存到數組中，然后狀態(tài)變化時依次調用函數。

實現代碼如下：

// MyPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }
    status = PENDING
    value = undefined
    reason = undefined
    // 存儲成功與失敗的處理邏輯
    onFulfilled = []
    onRejected = []

    resolve = (value) => {
        if (this.status !== PENDING) return
        this.status = FULFILLED
        this.value = value

        // 如果將狀態(tài)修復為成功，調用成功的回調
        while (this.onFulfilled.length) {
            // Array.prototype.shift() 用于刪除數組第一個元素，并返回
            this.onFulfilled.shift()(this.value)
        }
    }
    reject = (reason) => {
        if (this.status !== PENDING) return
        this.status = REJECTED
        this.reason = reason
        // 如果將狀態(tài)修復為失敗，調用失敗的回調
        while (this.onRejected.length) {
            // Array.prototype.shift() 用于刪除數組第一個元素，并返回
            this.onRejected.shift()(this.reason)
        }
    }
    then (onFulfilled, onRejected) {
        if (this.status === FULFILLED) {
            onFulfilled(this.value)
        } else if (this.status === REJECTED) {
            onRejected(this.reason)
        } else {
            // 表示既不是成功，也不是失敗。這個時候保存?zhèn)鬟f進來的兩個回調
            this.onFulfilled.push(onFulfilled)
            this.onRejected.push(onRejected)
        }
    }
}
module.exports = MyPromise

這里我們通過數組的shift()方法，該方法刪除數組的第一個元素，并返回，返回的這個值正好是一個回調函數，然后調用該函數即可實現該功能。

實現then的鏈式調用

想要實現then的鏈式調用，主要解決兩個問題：

返回的是一個新的MyPormise實例。
then的返回值作為下一次的鏈式調用的參數。

這里分為兩種情況：

直接返回一個值，可以直接作為值使用
返回一個新的MyPormise實例，此時就需要判斷其狀態(tài)

實現代碼如下：

// MyPromise.js
/* 省略的代碼同上 */
class MyPromise {
    /* 省略的代碼同上 */

    // then方法的實現
    then (onFulfilled, onRejected) {
        // then 方法返回一個MyPromise實例
        return new MyPromise((resolve, reject) => {
            // 判斷當前狀態(tài),根據狀態(tài)調用指定回調
            if (this.status === FULFILLED) {
                // 將成功的值作為參數返回
                // 保存執(zhí)行回調函數的結果
                const result = onFulfilled(this.value)

                // 如果返回的是一個普通的值，直接調用resolve
                // 如果是一個MyPromise實例，根據返回的解決來決定是調用resolve，還是reject
                resolvePromise(result, resolve, reject)
            } else if (this.status === REJECTED) {
                // 將失敗的原因作為參數返回
                onRejected(this.reason)
            } else {
                // 表示既不是成功，也不是失敗。這個時候保存?zhèn)鬟f進來的兩個回調
                this.onFulfilled.push(onFulfilled)
                this.onRejected.push(onRejected)
            }
        })
    }
}
function resolvePromise (result, resolve, reject) {
    // 判斷傳遞的result是不是MyPromise的實例對象
    if (result instanceof MyPromise) {
        // 說明是MyPromise的實例對象
        // 調用.then方法，然后在回調函數中獲取到具體的值，然后調用具體的回調
        // result.then(value => resolve(value), reason => reject(reason))
        // 簡寫
        result.then(resolve, reject)
    } else {
        resolve(result)
    }
}
module.exports = MyPromise

then方法鏈式調用識別Promise對象自返回

在Promise中，如果then方法返回的是自己的promise對象，則會發(fā)生promise的嵌套，這個時候程序會報錯，

測試代碼如下：

var promise = new Promise((resolve, reject) => {
  resolve(100)
})
var p1 = promise.then(value => {
  console.log(value)
  return p1
})
// 100
// Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

想要解決這個問題其實我們只需要在then方法返回的MyPromise實例對象與then中回調函數返回的值進行比對，如果相同的返回一個reject的MyPromise實例對象，并創(chuàng)建一個TypeError類型的Error。

實現代碼如下：

// MyPromise.js
    /* 省略的代碼同上 */
    then (onFulfilled, onRejected) {
        // then 方法返回一個MyPromise實例
        const promise = new MyPromise((resolve, reject) => {
            // 判斷當前狀態(tài),根據狀態(tài)調用指定回調
            if (this.status === FULFILLED) {
                // 這里并不需要延遲執(zhí)行，而是通過setTimeout將其變成異步函數
                // 如果不變成異步的話是在函數內獲取不到promise的
                setTimeout(() => {
                    // 將成功的值作為參數返回
                    // 保存執(zhí)行回調函數的結果
                    const result = onFulfilled(this.value)

                    // 如果返回的是一個普通的值，直接調用resolve
                    // 如果是一個MyPromise實例，根據返回的解決來決定是調用resolve，還是reject
                    resolvePromise(promise, result, resolve, reject)
                }, 0)
            } else if (this.status === REJECTED) {
                // 將失敗的原因作為參數返回
                onRejected(this.reason)
            } else {
                // 表示既不是成功，也不是失敗。這個時候保存?zhèn)鬟f進來的兩個回調
                this.onFulfilled.push(onFulfilled)
                this.onRejected.push(onRejected)
            }
        })
        return promise
    }
}
function resolvePromise (promise, result, resolve, reject) {
    // 這里修改一下該函數，如果return的Promise實例對象，也就是傳入的promise===result的話，說明在promise中return的是當前promise對象。
    if (promise === result) {
        // 這里調用reject，并拋出一個Error
        // return 是必須的，阻止程序向下執(zhí)行
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    // 判斷傳遞的result是不是MyPromise的實例對象
    if (result instanceof MyPromise) {
        // 說明是MyPromise的實例對象
        // 調用.then方法，然后在回調函數中獲取到具體的值，然后調用具體的回調
        // result.then(value => resolve(value), reason => reject(reason))
        // 簡寫
        result.then(resolve, reject)
    } else {
        resolve(result)
    }
}
module.exports = MyPromise

這里then方法中的setTimeout的作用并不是延遲執(zhí)行，而是為了調用resolvePromise函數時，保證創(chuàng)建的promise存在。

捕獲錯誤及 then 鏈式調用其他狀態(tài)代碼補充

到目前為止我們現實的Promise并沒有對異常做任何處理，為了保證代碼的健壯性，我們需要對異常做一些處理。

捕獲執(zhí)行器錯誤

現在我們需要對執(zhí)行器進行異常捕獲，如果發(fā)生異常，就將我們的狀態(tài)修改為rejected。

捕獲執(zhí)行器的錯誤也比較簡單，只需要在構造函數中加入try...catch語句就可以，

實現代碼如下：

    constructor(executor) {
        try {
            // 在調用executor需要傳遞兩個回調函數，分別是resolve和reject
            executor(this.resolve, this.reject)
        } catch (e) {
            // 發(fā)生異常調用reject
            this.reject(e)
        }
    }

測試代碼如下：

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
    throw new Error('執(zhí)行器錯誤')
})

promise.then(value => {
    console.log(value);
}, error => {
    console.log(error.message);
})
/* 輸出
    執(zhí)行器錯誤
*/

捕獲then中的報錯

現在我們需要對then中的異常捕獲到，并在下一次鏈式調用中傳遞到then的第二個函數中，實現的方式也是通過try...catch語句，

示例代碼如下：

// then方法的實現
then (onFulfilled, onRejected) {
    // then 方法返回一個MyPromise實例
    const promise = new MyPromise((resolve, reject) => {
        // 判斷當前狀態(tài),根據狀態(tài)調用指定回調
        if (this.status === FULFILLED) {
            // 這里并不需要延遲執(zhí)行，而是通過setTimeout將其變成異步函數
            // 如果不變成異步的話是在函數內獲取不到promise的
            setTimeout(() => {
                try {
                    // 將成功的值作為參數返回
                    // 保存執(zhí)行回調函數的結果
                    const result = onFulfilled(this.value)

                    // 如果返回的是一個普通的值，直接調用resolve
                    // 如果是一個MyPromise實例，根據返回的解決來決定是調用resolve，還是reject
                    resolvePromise(promise, result, resolve, reject)
                } catch (error) {
                    reject(error)
                }
            }, 0)
        } else if (this.status === REJECTED) {
            // 將失敗的原因作為參數返回
            onRejected(this.reason)
        } else {
            // 表示既不是成功，也不是失敗。這個時候保存?zhèn)鬟f進來的兩個回調
            this.onFulfilled.push(onFulfilled)
            this.onRejected.push(onRejected)
        }
    })
    return promise
}

測試代碼如下：

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})
// 第一個then方法中的錯誤要在第二個then方法中捕獲到
promise.then(value => {
    console.log('resolve', value)
    throw new Error('then的執(zhí)行過程中遇到異常')
}).then(null, reason => {
    console.log(reason.message)
})

/* 輸出
    resolve 成功
    then的執(zhí)行過程中遇到異常
*/

錯誤與異步狀態(tài)的鏈式調用

現在只對成功狀態(tài)的then進行的鏈式調用以及錯誤處理，錯誤與異步狀態(tài)未進行處理，其實處理起來也是一樣的，

示例代碼如下：

    // then方法的實現
    then (onFulfilled, onRejected) {
        // then 方法返回一個MyPromise實例
        const promise = new MyPromise((resolve, reject) => {
            // 判斷當前狀態(tài),根據狀態(tài)調用指定回調
            if (this.status === FULFILLED) {
                // 這里并不需要延遲執(zhí)行，而是通過setTimeout將其變成異步函數
                // 如果不變成異步的話是在函數內獲取不到promise的
                setTimeout(() => {
                    try {
                        // 將成功的值作為參數返回
                        // 保存執(zhí)行回調函數的結果
                        const result = onFulfilled(this.value)

                        // 如果返回的是一個普通的值，直接調用resolve
                        // 如果是一個MyPromise實例，根據返回的解決來決定是調用resolve，還是reject
                        resolvePromise(promise, result, resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            } else if (this.status === REJECTED) {
                // 失敗的處理同成功處理，只是調用的回調函數不同
                setTimeout(() => {
                    try {
                        const result = onRejected(this.reason)
                        resolvePromise(promise, result, resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            } else {
                this.onFulfilled.push((value) => {
                    setTimeout(() => {
                        try {
                            const result = onFulfilled(value)
                            resolvePromise(promise, result, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0)
                })
                this.onRejected.push((reason) => {
                    setTimeout(() => {
                        try {
                            const result = onRejected(reason)
                            resolvePromise(promise, result, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0)
                })
            }
        })
        return promise
    }

測試代碼如下：

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
    setTimeout(resolve, 2000, '成功')
})
// 第一個then方法中的錯誤要在第二個then方法中捕獲到
promise.then(value => {
    console.log('resolve', value)
    throw new Error('then的執(zhí)行過程中遇到異常')
}).then(null, reason => {
    console.log(reason.message)
})
/* 輸出
    resolve 成功
    then的執(zhí)行過程中遇到異常
*/

將then方法的參數變成可選參數

Promise中的then方法其實是兩個可以可選參數，如果我們不傳遞任何參數的話，里面的結果是向下傳遞的，直到捕獲為止，

例如下面這段代碼：

new Promise((resolve, reject) => {
    resolve(100)
})
    .then()
    .then()
    .then()
    .then(value => console.log(value))
// 最后一個then輸入100

這段代碼可以理解為：

new Promise((resolve, reject) => {
    resolve(100)
})
    .then(value => value)
    .then(value => value)
    .then(value => value)
    .then(value => console.log(value))

所以說我們只需要在沒有傳遞回調函數時，賦值一個默認的回調函數即可。

實現代碼如下：

// then方法的實現
then (onFulfilled, onRejected) {
    // 如果傳遞函數，就是用傳遞的函數，否則指定一個默認值，用于參數傳遞
    onFulfilled = onFulfilled ? onFulfilled : value => value
    // 同理
    onRejected = onRejected ? onRejected : reason => { throw reason }
    // then 方法返回一個MyPromise實例
    const promise = new MyPromise((resolve, reject) => {
        // 判斷當前狀態(tài),根據狀態(tài)調用指定回調
        if (this.status === FULFILLED) {...
        } else if (this.status === REJECTED) {...
        } else {...
        }
    })
    return promise
}

Promise.all方法的實現

關于all()方法的使用，可以參數Promise.all()。簡單的說Promise.all()會將多個Promise實例包裝為一個Promise實例，且順序與調用順序一致，

示例代碼如下：

function p1 () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p1')
        }, 2000)
    })
}
function p2 () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p2')
        }, 0)
    })
}
Promise.all(['a', 'b', p1(), p2(), 'c']).then(result => {
    console.log(result)
    // ["a", "b", "p1", "p2", "c"]
})

在這段代碼中，我們的p1的執(zhí)行是延遲了2s的，這里如果不使用Promise.all()的話最終順序是與我們調用不同的。

現在我們來分析一下all()的實現思路：

all()方法可以通過類直接調用，所以是一個靜態(tài)方法
all()方法接收一個數組，數組中的值可以是一個普通值，也可以是一個MyPromise的實例對象
return一個新的MyPromise實例對象
遍歷數組中的每一個值，判斷值得類型，如果是一個普通值得話直接將值存入一個數組；如果是一個MyPromise的實例對象的話，會調用then方法，然后根據執(zhí)行后的狀態(tài)，如果失敗的話調用新的MyPromise實例對象中的rejecte，如果是成功話將這個值存入一個數組
存入數組時計數，如果存入的數量達到傳入的數組長度，說明調用完畢，執(zhí)行resolve并將最終的結果數組作為參數返回。

實現代碼：

/** 
 * @description: 將多個Promise實例合并為一個Promise實例
 * @param {*} array Promise或者普通值
 * @returns {Promise}
 */
static all (array) {
    // 用于存放最終結果的數組
    let result = []
    // 用于計算當前已經執(zhí)行完的實例的數量
    let count = 0
    // 最后返回的是一個Promise實例
    return new MyPromise((resolve, reject) => {
        /** 
         * @description: 將執(zhí)行完畢的值加入結果數組，并根據實際情況決定是否調用resolve
         * @param {*} result 存放結果的數組
         * @param {*} index 要加入的索引
         * @param {*} value 要加入數組的值
         * @param {*} resolve Promise中的resolve
         */
        function addResult (result, index, value, resolve) {
            // 根據索引值，將結果堆入數組中
            result[index] = value
            // 執(zhí)行完畢一個 count+1，如果當前值等于總長度的話說明已經執(zhí)行結束了，可以直接調用resolve，說明已經成功執(zhí)行完畢了
            if (++count === array.length) {
                // 將執(zhí)行結果返回
                resolve(result)
            }
        }
        // 遍歷穿入的數組，每個都執(zhí)行then方法，獲取到最終的結果
        array.forEach((p, index) => {
            // 判斷p是不是MyPromise的實例，如果是的話調用then方法，不是直接將值加入數組中
            if (p instanceof MyPromise) {
                p.then(
                    // 成功時將結果直接加入數組中
                    value => {
                        addResult(result, index, value, resolve)
                    },
                    // 如果失敗直接返回失敗原因
                    reason => {
                        reject(reason)
                    }
                )
            }
            else {
                addResult(result, index, p, resolve)
            }
        })
    })
}

Promise.resolve方法的實現

關于Promise.resolve()方法的用法可以參考Promise.resolve()與Promise.reject()。

我們實現的思路主要如下：

該方法是一個靜態(tài)方法
該方法接受的如果是一個值就將該值包裝為一個MyPromise的實例對象返回，如果是一個MyPromise的實例對象，調用then方法返回。

實現代碼如下：

static resolve (value) {
    // 如果是MyPromise的實例，就直接返回這個實例
    if (value instanceof MyPromise) return value
    // 如果不是的話創(chuàng)建一個MyPromise實例，并返回傳遞的值
    return new MyPromise((resolve) => {
        resolve(value)
    })
}

finally方法的實現

關于finally方法可參考finally()，實現該方法的實現代碼如下：

finally (callback) {
    // 如何拿到當前的promise的狀態(tài)，使用then方法，而且不管怎樣都返回callback
    // 而且then方法就是返回一個promise對象，那么我們直接返回then方法調用之后的結果即可
    // 我們需要在回調之后拿到成功的回調，所以需要把value也return
    // 失敗的回調也拋出原因
    // 如果callback是一個異步的promise對象，我們還需要等待其執(zhí)行完畢，所以需要用到靜態(tài)方法resolve
    return this.then(value => {
        // 把callback調用之后返回的promise傳遞過去，并且執(zhí)行promise，且在成功之后返回value
        return MyPromise.resolve(callback()).then(() => value)
    }, reason => {
        // 失敗之后調用的then方法，然后把失敗的原因返回出去。
        return MyPromise.resolve(callback()).then(() => { throw reason })
    })
}

測試：

function p1 () {
    return new MyPromise((resolve, reject) => {
        setTimeout(() => {
            resolve('p1')
        }, 2000)
    })
}
function p2 () {
    return new MyPromise((resolve, reject) => {
        reject('p2 reject')
    })
}
p2().finally(
    () => {
        console.log('finally p2')
        return p1()
    }
).then(
    value => {
        console.log(value)
    }, reason => {
        console.log(reason)
    }
)
// finally p2
// 兩秒之后執(zhí)行p2 reject

catch方法的實現

關于catch方法可以參考catch()，實現該方法其實非常簡單，只需要在內部調用then方法，不傳遞第一個回調函數即可，

實現代碼如下：

catch (callback) {
    return this.then(null, failCallback)
}

測試如下：

function p () {
    return new MyPromise((resolve, reject) => {
        reject(new Error('reject'))
    })
}
p()
    .then(value => {
        console.log(value)
    })
    .catch(reason => console.log(reason))

完整代碼

// MyPromise.js
// 定義所有狀態(tài)的常量
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
// Promise實質上就是一個類，首先創(chuàng)建一個Promise的類
class MyPromise {
    // 實例化Promise時需要一個回調函數，該回調函數立即執(zhí)行
    constructor(executor) {
        try {
            // 在調用executor需要傳遞兩個回調函數，分別是resolve和reject
            executor(this.resolve, this.reject)
        } catch (e) {
            // 發(fā)生異常調用reject
            this.reject(e)
        }
    }
    // Promise 的狀態(tài)
    status = PENDING
    // 記錄成功與失敗的值
    value = undefined
    reason = undefined
    // 存儲成功與失敗的處理邏輯
    onFulfilled = []
    onRejected = []

    resolve = (value) => {// 這里使用箭頭函數是為了使其內部的this指向為該實例化后的對象
        // 形參value表示，調用resolve時傳遞的參數
        // 如果當前狀態(tài)不是pending，就直接跳出該邏輯
        if (this.status !== PENDING) return
        // 將狀態(tài)修改為成功
        this.status = FULFILLED
        // 將傳入的值進行保存
        this.value = value
        // 如果將狀態(tài)修復為成功，調用成功的回調
        // this.onFulfilled && this.onFulfilled(this.value)
        while (this.onFulfilled.length) {
            // Array.prototype.shift() 用于刪除數組第一個元素，并返回
            this.onFulfilled.shift()(this.value)
        }
    }
    reject = (reason) => {// 這里使用箭頭函數是為了使其內部的this指向為該實例化后的對象
        // 形參reason表示，調用reject時傳遞的失敗的原因
        // 如果當前狀態(tài)不是pending，就直接跳出該邏輯
        if (this.status !== PENDING) return

        // 將狀態(tài)修改為失敗
        this.status = REJECTED

        // 保存失敗的原因
        this.reason = reason

        // 如果將狀態(tài)修復為失敗，調用失敗的回調
        // this.onRejected && this.onRejected(this.reason)
        while (this.onRejected.length) {
            // Array.prototype.shift() 用于刪除數組第一個元素，并返回
            this.onRejected.shift()(this.reason)
        }
    }
    // then方法的實現
    then (onFulfilled, onRejected) {
        // 如果傳遞函數，就是用傳遞的函數，否則指定一個默認值，用于參數傳遞
        onFulfilled = onFulfilled ? onFulfilled : value => value
        // 同理
        onRejected = onRejected ? onRejected : reason => { throw reason }
        // then 方法返回一個MyPromise實例
        const promise = new MyPromise((resolve, reject) => {
            // 判斷當前狀態(tài),根據狀態(tài)調用指定回調
            if (this.status === FULFILLED) {
                // 這里并不需要延遲執(zhí)行，而是通過setTimeout將其變成異步函數
                // 如果不變成異步的話是在函數內獲取不到promise的
                setTimeout(() => {
                    try {
                        // 將成功的值作為參數返回
                        // 保存執(zhí)行回調函數的結果
                        const result = onFulfilled(this.value)

                        // 如果返回的是一個普通的值，直接調用resolve
                        // 如果是一個MyPromise實例，根據返回的解決來決定是調用resolve，還是reject
                        resolvePromise(promise, result, resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            } else if (this.status === REJECTED) {
                // 失敗的處理同成功處理，只是調用的回調函數不同
                setTimeout(() => {
                    try {
                        const result = onRejected(this.reason)
                        resolvePromise(promise, result, resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            } else {
                // 表示既不是成功，也不是失敗。這個時候保存?zhèn)鬟f進來的兩個回調
                // this.onFulfilled.push(onFulfilled)
                // this.onRejected.push(onRejected)
                this.onFulfilled.push((value) => {
                    setTimeout(() => {
                        try {
                            const result = onFulfilled(value)
                            resolvePromise(promise, result, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0)
                })
                this.onRejected.push((reason) => {
                    setTimeout(() => {
                        try {
                            const result = onRejected(reason)
                            resolvePromise(promise, result, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0)
                })
            }
        })
        return promise
    }
    catch (callback) {
        return this.then(null, callback)
    }
    finally (callback) {
        // 如何拿到當前的promise的狀態(tài)，使用then方法，而且不管怎樣都返回callback
        // 而且then方法就是返回一個promise對象，那么我們直接返回then方法調用之后的結果即可
        // 我們需要在回調之后拿到成功的回調，所以需要把value也return
        // 失敗的回調也拋出原因
        // 如果callback是一個異步的promise對象，我們還需要等待其執(zhí)行完畢，所以需要用到靜態(tài)方法resolve
        return this.then(value => {
            // 把callback調用之后返回的promise傳遞過去，并且執(zhí)行promise，且在成功之后返回value
            return MyPromise.resolve(callback()).then(() => value)
        }, reason => {
            // 失敗之后調用的then方法，然后把失敗的原因返回出去。
            return MyPromise.resolve(callback()).then(() => { throw reason })
        })
    }
    /** 
     * @description: 將多個Promise實例合并為一個Promise實例
     * @param {*} array Promise或者普通值
     * @returns {Promise}
     */
    static all (array) {
        // 用于存放最終結果的數組
        let result = []
        // 用于計算當前已經執(zhí)行完的實例的數量
        let count = 0
        // 最后返回的是一個Promise實例
        return new MyPromise((resolve, reject) => {
            /** 
             * @description: 將執(zhí)行完畢的值加入結果數組，并根據實際情況決定是否調用resolve
             * @param {*} result 存放結果的數組
             * @param {*} index 要加入的索引
             * @param {*} value 要加入數組的值
             * @param {*} resolve Promise中的resolve
             */
            function addResult (result, index, value, resolve) {
                // 根據索引值，將結果堆入數組中
                result[index] = value
                // 執(zhí)行完畢一個 count+1，如果當前值等于總長度的話說明已經執(zhí)行結束了，可以直接調用resolve，說明已經成功執(zhí)行完畢了
                if (++count === array.length) {
                    // 將執(zhí)行結果返回
                    resolve(result)
                }
            }
            // 遍歷穿入的數組，每個都執(zhí)行then方法，獲取到最終的結果
            array.forEach((p, index) => {
                // 判斷p是不是MyPromise的實例，如果是的話調用then方法，不是直接將值加入數組中
                if (p instanceof MyPromise) {
                    p.then(
                        // 成功時將結果直接加入數組中
                        value => {
                            addResult(result, index, value, resolve)
                        },
                        // 如果失敗直接返回失敗原因
                        reason => {
                            reject(reason)
                        }
                    )
                }
                else {
                    addResult(result, index, p, resolve)
                }
            })
        })
    }
    static resolve (value) {
        // 如果是MyPromise的實例，就直接返回這個實例
        if (value instanceof MyPromise) return value
        // 如果不是的話創(chuàng)建一個MyPromise實例，并返回傳遞的值
        return new MyPromise((resolve) => {
            resolve(value)
        })
    }

}
function resolvePromise (promise, result, resolve, reject) {
    // 這里修改一下該函數，如果return的Promise實例對象，也就是傳入的promise===result的話，說明在promise中return的是當前promise對象。
    if (promise === result) {
        // 這里調用reject，并拋出一個Error
        // return 是必須的，阻止程序向下執(zhí)行
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    // 判斷傳遞的result是不是MyPromise的實例對象
    if (result instanceof MyPromise) {
        // 說明是MyPromise的實例對象
        // 調用.then方法，然后在回調函數中獲取到具體的值，然后調用具體的回調
        // result.then(value => resolve(value), reason => reject(reason))
        // 簡寫
        result.then(resolve, reject)
    } else {
        resolve(result)
    }
}
module.exports = MyPromise

到此這篇關于萬字詳解JavaScript手寫一個Promise的文章就介紹到這了,更多相關JS手寫Promise內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

javascript中比較字符串是否相等的方法
使用js比較字符串是否相等的方法有很多，在本文為大家介紹一個從外國網站看到的方法，感興趣的朋友可以參考下哈，希望對大家學習js有所幫助
2013-07-07
微信小程序日期選擇器使用詳解
這篇文章主要為大家詳細介紹了微信小程序日期選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
js輸入框使用正則表達式校驗輸入內容的實例
下面小編就為大家?guī)硪黄猨s輸入框使用正則表達式校驗輸入內容的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
js腳本分頁代碼分享（7種樣式）
這篇文章主要介紹了7種JS腳本分頁樣式，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
js消除圖片小游戲代碼
這篇文章主要介紹了js消除圖片小游戲代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-12-12
js實現一個簡單的MVVM框架示例
下面小編就為大家分享一篇js實現一個簡單的MVVM框架示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
JS實現拼音(字母)匹配漢字(姓名)的示例代碼
這篇文章主要為大家詳細介紹了如何利用JavaScript實現拼音(字母)匹配(搜索)漢字(姓名)的效果，文中的示例代碼講解詳細，感興趣的可以了解一下
2023-04-04
javascript代碼實現簡易計算器
這篇文章主要為大家詳細介紹了javascript代碼實現簡易計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
原生JavaScript實現瀑布流布局
這篇文章主要介紹了原生JavaScript實現瀑布流布局的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-12-12
JavaScript中Object和Function的關系小結
JavaScript 中 Object 和 Function 的關系是微妙的，他們互為對方的一個實例。
2009-09-09