摘要：大家都知道怎么用，但是對(duì)于內(nèi)部的原理很多人都不是很清楚來(lái)看一個(gè)面試題的是怎么實(shí)現(xiàn)的首先來(lái)分析一下是屬于實(shí)例上的方法參數(shù)有個(gè)，分別為，并且都是可選的可以實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用執(zhí)行要執(zhí)行或者方法參數(shù)，分別有自己的參數(shù)，分別是的參數(shù)跟的參數(shù)只能使用前一個(gè)的

Promise 大家都知道怎么用， 但是對(duì)于內(nèi)部的原理很多人都不是很清楚

來(lái)看一個(gè)面試題： Promise的then 是怎么實(shí)現(xiàn)的

首先來(lái)分析一下then

then是屬于實(shí)例上的方法

參數(shù)有2個(gè)，分別為onFulfilled, onRejected，并且都是可選的

可以實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用

then執(zhí)行要執(zhí)行Promise onFulfilled 或者 onRejected 方法

參數(shù)onFulfilled，onRejected 分別有自己的參數(shù)， 分別是resolve的參數(shù)跟reject的參數(shù)

then只能使用前一個(gè)then的返回值

then返回值不能是同一個(gè)promise

來(lái)一個(gè)一個(gè)看吧

then是屬于實(shí)例上的方法

Promise.prototype.then = function(){}

參數(shù)有2個(gè)，分別為onFulfilled, onRejected，并且都是可選的

Promise.prototype.then = function(onFulfilled,onRejected){}

可以實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用

Promise.prototype.then = function(onFulfilled,onRejected){
    return new Promise(function(resolve,reject){
        // 代碼省略
    })
}

要實(shí)現(xiàn)promise鏈?zhǔn)? 返回的必須是一個(gè)Promise 再由于status 改變狀態(tài)了不能再變 所以需要第二個(gè).... 第N個(gè)promise 調(diào)用新的resolve

then執(zhí)行要執(zhí)行Promise onFulfilled 或者 onRejected 方法

Promise.prototype.then = function(onFulfilled,onRejected){
    var self = this; // 保存當(dāng)前上下文
    return new Promise(function(resolve,reject){
        if(self.status === "resolved"){
             onFulfilled(self.res)
        }
        if(self.status === "rejected"){
            onRejected(self.err)
        }
    })
}

Promise.resolve(res) 、、 同步代碼的執(zhí)行情況下 上述邏輯成立

參數(shù)onFulfilled，onRejected 分別有自己的參數(shù)， 分別是resolve的參數(shù)跟reject的參數(shù)

res 跟err 來(lái)源如下

function Promise(executor){
    let self = this
    this.status = "pending"  // Promise 的狀態(tài)值
    this.res = undefined   // 存成功之后的值
    this.err = undefined   // 存失敗之后的值
    executor(resolve,reject)
    // 省略代碼
}

executor 有2個(gè)參數(shù) 分別為resolve,reject
當(dāng)調(diào)用

new Promise((resolve,reject)=>{
    setTimeout(()=>{
        if(true){
            resolve("res")
        }else{
            reject("err")
        }
       
    },1000)
})

executor 會(huì)執(zhí)行 并且把成功的值或者失敗的值拋出來(lái)，resolve跟reject也是2個(gè)函數(shù) 定義在Promise內(nèi)部

function Promise(executor){
     // ...代碼省略
    function resolve(res){
        self.res = res 
    }
    function reject(err){
        self.err = err 
    }
    executor(resolve,reject)
    
}

resolve 跟reject 還需要改變 Promise的狀態(tài)值 并且一旦發(fā)生改變之后不能再次改變

function Promise(executor){
    // 代碼省略
    function resolve(res){
        if(self.status === "pending"){
            self.status = "resolved"
            self.res = res 
        }
    }
    function reject(err){
        if(self.status === "pending"){
            self.status = "rejected"
            self.err = err 
        }
    }
    executor(resolve,reject)
}

我們?cè)趀xecutor中操作的往往是異步代碼， 這個(gè)之后直接then， status的狀態(tài)值并未發(fā)生改變， 所以不會(huì)執(zhí)行onFulfilled跟onRejected,
這個(gè)時(shí)候我們需要訂閱

function Promise(executor){
    // 代碼省略
    this.onFulfilledCallback = []  // 存成功之后的回調(diào)
    this.onrejectedCallback = []  // 存失敗之后的回調(diào)
    function resolve(res){
        if(self.status === "pending"){
            self.status = "resolved"
            self.res = res 
        }
    }
    function reject(err){
        if(self.status === "pending"){
            self.status = "rejected"
            self.err = err 
        }
    }
    executor(resolve,reject)
}

new Promise(executor).then((onFulfilled,onrejected)=>{
    var self = this; // 保存當(dāng)前上下文   **注意： 第二次調(diào)用then this是指向new Promise的**
    return new Promise(function(resolve,reject){
        // ...代碼省略
        if(self.status === "pending"){
            self.onFulfilledCallback.push(function(){   // 把成功之后需要做的事存起來(lái)  有多少個(gè)then就有多少個(gè)函數(shù)
                onFulfilled(self.res)   // 注意 這里的self.res 會(huì)隨著then的調(diào)用發(fā)生改變  因?yàn)槊看蝨hen都new 了一個(gè)Promise
            })
            self.onrejectedCallback.push(function(){   // 把失敗之后的事存起來(lái) 有多少個(gè)then就有多少個(gè)函數(shù)
                onFulfilled(self.err)
            })
        }
    })
})

當(dāng)resolve的時(shí)候 或者reject的時(shí)候
一一拿出來(lái)執(zhí)行

function resolve(res){
    // 省略代碼
    self.res = res
    onFulfilledCallback.forEach(fn=>{
        fn()
    })
}

實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用我們需要對(duì)then函數(shù)執(zhí)行的返回值做一個(gè)操作?。?！

需求：

then的參數(shù)onFulfilled函數(shù) 需要接收到上一個(gè)onfulfilled的執(zhí)行結(jié)果

Promise.prototype.then = function(onFulfilled,onRejected){
    return new Promise((resolve,reject)=>{
        // ...代碼省略
        if(self.status === "resolved"){
            let x = onFulfilled(self.res)   // 拿到onFulfilled的執(zhí)行結(jié)果  注意：這里執(zhí)行Promise.resolve() 同步代碼
            // 然后把x傳遞給下一個(gè)then
            resolve(x)
        }
    })
}

如果resolve是異步的話(huà)

Promise.prototype.then = function(onFulfilled,onRejected){
    return new Promise((resolve,reject)=>{
        // ...代碼省略
        if(self.status === "resolved"){
            let x = onFulfilled(self.res)   // 拿到onFulfilled的執(zhí)行結(jié)果  注意：這里執(zhí)行的是Promise.resolve() 同步代碼
            // 然后把x傳遞給下一個(gè)then
            resolve(x)
        }
        if(self.status === "pending"){
            self.onFulfilledCallback.push(function(){
                let x = onFulfilled(self.res)  // 這里的self.res 是上一個(gè)new Promise上的值 此時(shí)的onFUlfilled 相當(dāng)于 fn(){let x = onFulfilled}  
                resolve(x)
            })
        }
    })
}

//  同時(shí)為了拿到 fn(){let x = onFulfilled ...} 得值 傳遞給下一個(gè)onFulfilled，onFulfilledCallback需要改寫(xiě) onRejectedCallback同理

onFulfilledCallback.forEach(fn=>{
    return fn()
})
onRejectedCallback.forEach(fn=>{
    return fn()
})

-

onFullfillled 的返回值可能是個(gè)promise 也可能是個(gè)普通值

考慮如下情況：

1. 返回值是個(gè)promise

Promsie.resolve(11).then(res=>{

    return new Promise(executor) 
})

2. 返回值是個(gè)普通值

Promsie.resolve(11).then(res=>{

    return 1
})

最關(guān)鍵的來(lái)了
我們需要對(duì)onFullfillled 的返回值進(jìn)行判斷

修改then函數(shù)

// ...代碼省略
if(self.status === "resolved"){
        let x = onFulfilled(self.res)   // 拿到onFulfilled的執(zhí)行結(jié)果  注意：這里執(zhí)行的是Promise.resolve() 同步代碼
        // 然后把x傳遞給下一個(gè)then
        promiseResolve(x,resolve,reject)
        
    }

function promiseResolve(x,resolve,reject){
    if((typeof x != null && typeof x == "object") || typeof x == "function"){  // 確定是個(gè)引用類(lèi)型
        if (x instanceof Promise){  // 確定是個(gè)Promise 實(shí)例
            let then = x.then
            then.call(x,res=>{    //  保證x調(diào)用res=>{}, res=>{}是then的onFulfilled方法  一直判斷直到onFulfilled 返回的是個(gè)普通值 然后resolve出去
                promiseResolve(res,resolve,reject)
            },err=>{
                reject(err)
            })
        }
    }else{
        resolve(x)
    }
}

then返回值不能是同一個(gè)promise

考慮這樣極端問(wèn)題：

let p = new Promise(resolve=>{
    resolve(3333)
})

let p2 = p.then(resolve=>{
    return p2
})

這樣會(huì)出現(xiàn)什么問(wèn)題呢， onFulfilled的返回結(jié)果如果是一個(gè)promise 上面的遞歸調(diào)用已經(jīng)說(shuō)明了 我們要不斷的去遞歸最終的onFulfilled結(jié)果 然后再改變p2的status 這樣變成了p2去等待p2的執(zhí)行結(jié)果 函數(shù)死掉了

所以onFulfilled的返回結(jié)果需要跟then的返回結(jié)果去比較 修改函數(shù)

function promiseResolve(x,resolve,reject,promise){
    if(x === promise ){
        return new Error("引用錯(cuò)誤！")
    }
    if((typeof x != null && typeof x == "object") || typeof x == "function"){  // 確定是個(gè)引用類(lèi)型
        if (x instanceof Promise){  // 確定是個(gè)Promise 實(shí)例
            let then = x.then
            then.call(x,res=>{    //  保證x調(diào)用res=>{}, res=>{}是then的onFulfilled方法  一直判斷直到onFulfilled 返回的是個(gè)普通值 然后resolve出去
                promiseResolve(res,resolve,reject)
            },err=>{
                reject(err)
            })
        }
    }else{
        resolve(x)
    }
}

Promise.prototype.then = function(onFulfilled,onRejected){

    // ...代碼省略
    let promise2 = new Promise((resolve,reject)=>{
        if(self.status === "pending"){
            self.onFulfilledCallback.push(function(){
                let x = onFulfilled(self.res)  // 這里的self.res 是上一個(gè)new Promise上的值 此時(shí)的onFUlfilled 相當(dāng)于 fn(){let x = onFulfilled}  
                promiseResolve(x,resolve,reject,promise2)
            })
        }
    })
    return promise2
}

這段代碼還是有錯(cuò)誤， 由于javascript主線(xiàn)程是單線(xiàn)程的， 所以在then里的promiseResolve是拿不到promise2的 所以我們需要開(kāi)啟異步 使用定時(shí)器或者nextTick 這里我們用定時(shí)器

Promise.prototype.then = function(onFulfilled,onRejected){

    // ...代碼省略
    let promise2 = new Promise((resolve,reject)=>{
        if(self.status === "pending"){
            self.onFulfilledCallback.push(function(){
                setTimeout(()=>{
                    let x = onFulfilled(self.res)  // 這里的self.res 是上一個(gè)new Promise上的值 此時(shí)的onFUlfilled 相當(dāng)于 fn(){let x = onFulfilled}  
                    promiseResolve(x,resolve,reject,promise2)
                },0)
            })
        }
    })
    return promise2
}

此時(shí) 整個(gè)then差不多完成了

onFulfilled，onRejected 有可能是undefined 這里未做判斷

在new Promise 時(shí) executor函數(shù)內(nèi)部有可能報(bào)錯(cuò) 這里未使用try catch捕獲

這里對(duì)于onRejected的錯(cuò)誤未拋出

then每次創(chuàng)建一個(gè)新的promise對(duì)象 對(duì)于同步的resolve，reject直接調(diào)用onFulfilled或者onRejected ，對(duì)于異步的resolve，reject使用
訂閱發(fā)布模式，把每個(gè)resolve，reject 暫存起來(lái) 等達(dá)到條件時(shí)候一一執(zhí)行， 并且拿到返回結(jié)果去跟內(nèi)部的promise比較，并且判斷如果是一個(gè)promise的話(huà)，不斷解析onFulfilled 的返回結(jié)果 直至resolve出去