簡單版Promise實現

MSYG發表於2019-03-30
Promise

前言

前一陣子騰訊的一面, 你能寫一個Promise嗎, 我就懵了, 面完趕快找部落格研究, Promise實現可能是現在面試官很容易問到的一個問題

具體實現

  1. 基本骨架
const PENDING = 'pending', RESOLVED = 'resloved', REJECTED = 'rejected' // 先定義三個狀態
function MyPromise(fn) {
    const _this = this;
    _this.state = PENDING; // 先設定狀態為初始狀態
    _this.value = null; // value是用於儲存reslove函式或者reject函式傳入的值
    _this.resolvedCallbacks = []; // 成功回撥佇列
    _this.rejectedCallbacks = []; // 失敗回撥佇列
    function resolve(value) {
        
    }
    function reject(value) {
        
    }
}
MyPromise.prototype.then = function (onFullfilled, onRejected) {
    
}
複製程式碼

上面一個最簡單的骨架沒有實現resolve, reject, 和最複雜的then函式 --- 應該不難理解

下面實現reslove和reject 函式, 兩個類似, 就寫一個註釋了

function reslove(value) {
    if (_this.state === PENDING) { // 先判斷狀態是不是初始狀態
        _this.state = RESOLVED; // 首先改變state
        _this.value = value; // 把值給內部
        _this.resolvedCallbacks.map(item => item(_this.value)) // 遍歷執行resloved函式佇列
    }
}
function reject(value) {
    if (_this.state === PENDING) {
        _this.state = REJECTED;
        _this.value = value;
        _this.rejectedCallbacks.map(item => item(_this.value))
    }
}
複製程式碼

下面就該嘗試執行fn了 在MyPromise內部reject函式下面新增

try {
    fn(resolve, reject) // 證明了new Promise時傳入的函式是立即執行的
} catch (e) {
    reject(e) // 並且內部有錯誤直接reject執行
}
複製程式碼

以上, MyPromise函式完成, 下一步實現比較複雜的.then函式

MyPromise.prototype.then = function (onFullfilled, onRejected) {
    const _this = this;
    onFullFilled = typeof onFullfilled === 'function' ? onFullfilled : onFullfilled: v => v; // 保證引數是函式
    onRejected = typeof onRejected === 'function' ? onRejected : onRejected: r => {throw r} 
    if (_this.state === PENDING) { // 如果狀態是初始狀態就往佇列裡面新增函式
        _this.reslovedCallbacks.push(onFullfilled);
        _this.rejectedCallbacks.push(onRejected);
    }
    if (_this.state === RESLOVED) { // 如果狀態改變就執行函式
        onFullfilled(_this.value)
    }
    if (_this.state === REJECTED) {
        onRejected(_this.value)
    }
}

複製程式碼

試試:

new MyPromise((resolve, reject) => {
    resolve(1); // 未來執行
    reject()
}).then(value => {
    console.log(value) // 1
})
複製程式碼

以上就是簡單版Promise實現, 大家看完後可以再進階看Promise/A+ 規範的Promise實現應該更容易理解

相關文章