Promise 的then 裏發生了什麼

Promise 大家都知道怎麼用，但是對於內部的原理很多人都不是很清楚

來看一個面試題： Promise的then 是怎麼實現的

首先來分析一下then

then是屬於實例上的方法
參數有2個，分別爲onFulfilled, onRejected，並且都是可選的
可以實現鏈式調用
then執行要執行Promise onFulfilled 或者 onRejected 方法
參數onFulfilled，onRejected 分別有自己的參數，分別是resolve的參數跟reject的參數
then只能使用前一個then的返回值
then返回值不能是同一個promise

來一個一個看吧

then是屬於實例上的方法

Promise.prototype.then = function(){}

參數有2個，分別爲onFulfilled, onRejected，並且都是可選的

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

可以實現鏈式調用

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

要實現promise鏈式返回的必須是一個Promise 再由於status 改變狀態了不能再變所以需要第二個.... 第N個promise 調用新的resolve

then執行要執行Promise onFulfilled 或者 onRejected 方法

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

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

參數onFulfilled，onRejected 分別有自己的參數，分別是resolve的參數跟reject的參數

res 跟err 來源如下

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

executor 有2個參數分別爲resolve,reject
當調用

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

executor 會執行並且把成功的值或者失敗的值拋出來，resolve跟reject也是2個函數定義在Promise內部

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

resolve 跟reject 還需要改變 Promise的狀態值並且一旦發生改變之後不能再次改變

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)
}

我們在executor中操作的往往是異步代碼，這個之後直接then， status的狀態值並未發生改變，所以不會執行onFulfilled跟onRejected,
這個時候我們需要訂閱

function Promise(executor){
    // 代碼省略
    this.onFulfilledCallback = []  // 存成功之後的回調
    this.onrejectedCallback = []  // 存失敗之後的回調
    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; // 保存當前上下文   **注意： 第二次調用then this是指向new Promise的**
    return new Promise(function(resolve,reject){
        // ...代碼省略
        if(self.status === 'pending'){
            self.onFulfilledCallback.push(function(){   // 把成功之後需要做的事存起來  有多少個then就有多少個函數
                onFulfilled(self.res)   // 注意 這裏的self.res 會隨着then的調用發生改變  因爲每次then都new 了一個Promise
            })
            self.onrejectedCallback.push(function(){   // 把失敗之後的事存起來 有多少個then就有多少個函數
                onFulfilled(self.err)
            })
        }
    })
})

當resolve的時候或者reject的時候
一一拿出來執行

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

實現鏈式調用我們需要對then函數執行的返回值做一個操作！！！

需求：

then的參數onFulfilled函數需要接收到上一個onfulfilled的執行結果

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

如果resolve是異步的話

Promise.prototype.then = function(onFulfilled,onRejected){
    return new Promise((resolve,reject)=>{
        // ...代碼省略
        if(self.status === 'resolved'){
            let x = onFulfilled(self.res)   // 拿到onFulfilled的執行結果  注意：這裏執行的是Promise.resolve() 同步代碼
            // 然後把x傳遞給下一個then
            resolve(x)
        }
        if(self.status === 'pending'){
            self.onFulfilledCallback.push(function(){
                let x = onFulfilled(self.res)  // 這裏的self.res 是上一個new Promise上的值 此時的onFUlfilled 相當於 fn(){let x = onFulfilled}  
                resolve(x)
            })
        }
    })
}

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

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

onFullfillled 的返回值可能是個promise 也可能是個普通值

考慮如下情況：

1. 返回值是個promise

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

    return new Promise(executor) 
})

2. 返回值是個普通值

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

    return 1
})

最關鍵的來了
我們需要對onFullfillled 的返回值進行判斷

修改then函數

// ...代碼省略
if(self.status === 'resolved'){
        let x = onFulfilled(self.res)   // 拿到onFulfilled的執行結果  注意：這裏執行的是Promise.resolve() 同步代碼
        // 然後把x傳遞給下一個then
        promiseResolve(x,resolve,reject)
        
    }

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

then返回值不能是同一個promise

考慮這樣極端問題：

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

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

這樣會出現什麼問題呢， onFulfilled的返回結果如果是一個promise 上面的遞歸調用已經說明了我們要不斷的去遞歸最終的onFulfilled結果然後再改變p2的status 這樣變成了p2去等待p2的執行結果函數死掉了

所以onFulfilled的返回結果需要跟then的返回結果去比較修改函數

function promiseResolve(x,resolve,reject,promise){
    if(x === promise ){
        return new Error('引用錯誤！')
    }
    if((typeof x != null && typeof x == 'object') || typeof x == 'function'){  // 確定是個引用類型
        if (x instanceof Promise){  // 確定是個Promise 實例
            let then = x.then
            then.call(x,res=>{    //  保證x調用res=>{}, res=>{}是then的onFulfilled方法  一直判斷直到onFulfilled 返回的是個普通值 然後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 是上一個new Promise上的值 此時的onFUlfilled 相當於 fn(){let x = onFulfilled}  
                promiseResolve(x,resolve,reject,promise2)
            })
        }
    })
    return promise2
}

這段代碼還是有錯誤，由於javascript主線程是單線程的，所以在then裏的promiseResolve是拿不到promise2的所以我們需要開啓異步使用定時器或者nextTick 這裏我們用定時器

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 是上一個new Promise上的值 此時的onFUlfilled 相當於 fn(){let x = onFulfilled}  
                    promiseResolve(x,resolve,reject,promise2)
                },0)
            })
        }
    })
    return promise2
}

此時整個then差不多完成了

需要補充的點

onFulfilled，onRejected 有可能是undefined 這裏未做判斷
在new Promise 時 executor函數內部有可能報錯這裏未使用try catch捕獲
這裏對於onRejected的錯誤未拋出

總結

then每次創建一個新的promise對象對於同步的resolve，reject直接調用onFulfilled或者onRejected ，對於異步的resolve，reject使用
訂閱發佈模式，把每個resolve，reject 暫存起來等達到條件時候一一執行，並且拿到返回結果去跟內部的promise比較，並且判斷如果是一個promise的話，不斷解析onFulfilled 的返回結果直至resolve出去

Promise 的then 裏發生了什麼

需要補充的點

總結

前端模塊化

JavaScript中的異步編程

javascript中的依賴注入【轉】

進擊webpack4 （優化篇）

進擊webpack4 （基礎篇：配置二）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結