Promise 的then 里發(fā)生了什么

Joyven 發(fā)布于2019-08-23 15:24 / 2601人閱讀

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

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

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

首先來分析一下then

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

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

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

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

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

then只能使用前一個then的返回值

then返回值不能是同一個promise

來一個一個看吧

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

Promise.prototype.then = function(){}

參數(shù)有2個，分別為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)? 返回的必須是一個Promise 再由于status 改變狀態(tài)了不能再變所以需要第二個.... 第N個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 來源如下

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

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

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

executor 會執(zhí)行并且把成功的值或者失敗的值拋出來，resolve跟reject也是2個函數(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)
}

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

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(){   // 把成功之后需要做的事存起來  有多少個then就有多少個函數(shù)
                onFulfilled(self.res)   // 注意 這里的self.res 會隨著then的調(diào)用發(fā)生改變  因?yàn)槊看蝨hen都new 了一個Promise
            })
            self.onrejectedCallback.push(function(){   // 把失敗之后的事存起來 有多少個then就有多少個函數(shù)
                onFulfilled(self.err)
            })
        }
    })
})

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

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

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

需求：

then的參數(shù)onFulfilled函數(shù) 需要接收到上一個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傳遞給下一個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的執(zhí)行結(jié)果  注意：這里執(zhí)行的是Promise.resolve() 同步代碼
            // 然后把x傳遞給下一個then
            resolve(x)
        }
        if(self.status === "pending"){
            self.onFulfilledCallback.push(function(){
                let x = onFulfilled(self.res)  // 這里的self.res 是上一個new Promise上的值 此時的onFUlfilled 相當(dāng)于 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
})

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

修改then函數(shù)

// ...代碼省略
if(self.status === "resolved"){
        let x = onFulfilled(self.res)   // 拿到onFulfilled的執(zhí)行結(jié)果  注意：這里執(zhí)行的是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 實(shí)例
            let then = x.then
            then.call(x,res=>{    //  保證x調(diào)用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
})

這樣會出現(xiàn)什么問題呢， onFulfilled的返回結(jié)果如果是一個promise 上面的遞歸調(diào)用已經(jīng)說明了我們要不斷的去遞歸最終的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("引用錯誤！")
    }
    if((typeof x != null && typeof x == "object") || typeof x == "function"){  // 確定是個引用類型
        if (x instanceof Promise){  // 確定是個Promise 實(shí)例
            let then = x.then
            then.call(x,res=>{    //  保證x調(diào)用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 相當(dāng)于 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 相當(dāng)于 fn(){let x = onFulfilled}  
                    promiseResolve(x,resolve,reject,promise2)
                },0)
            })
        }
    })
    return promise2
}

此時整個then差不多完成了

需要補(bǔ)充的點(diǎn)

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

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

這里對于onRejected的錯誤未拋出

總結(jié)

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

GPU云服務(wù)器云服務(wù)器美國政府：今年發(fā)生了三起針對水處理廠的勒發(fā)生了云服務(wù)器里的專有網(wǎng)絡(luò)是什么 then

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102006.html

發(fā)表評論

登陸后可評論

0條評論

Joyven

男|高級講師

我要關(guān)注我要私信

TA的文章

Powershell 安裝不同文件格式的方法記錄

閱讀 693·2021-11-24 09:39
SSL證書為什么會有有效期？如何有效避免SSL證書過期？

閱讀 2364·2021-11-22 13:54
RackNerd：美國便宜VPS促銷，AMD Ryzen 3900X CPU，NVMe SSD硬盤，

閱讀 2231·2021-09-23 11:46
HTML5的離線存儲

閱讀 3275·2019-08-30 15:55
css--圖片廊

閱讀 2706·2019-08-30 15:54
5.React中組件通信問題

閱讀 2437·2019-08-30 14:18
使用 CSS 追蹤用戶

閱讀 1567·2019-08-29 14:15
使用移動自適應(yīng)布局+easy mock實(shí)現(xiàn)移動界面的簡單實(shí)現(xiàn)

閱讀 2759·2019-08-29 13:49

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Promise 的then 里發(fā)生了什么

相關(guān)文章

**ES6 Promise - Promise的生命周期和創(chuàng)建**

原創(chuàng) | JS異步工具之--Promise

馬蹄疾 | 詳解 JavaScript 異步機(jī)制及發(fā)展歷程(萬字長文)

**寫一個符合promiseA+規(guī)范的promise實(shí)現(xiàn)**

Promise初級與進(jìn)階---都在這了

發(fā)表評論

0條評論

Joyven

男|高級講師

TA的文章

Powershell 安裝不同文件格式的方法記錄

SSL證書為什么會有有效期？如何有效避免SSL證書過期？

RackNerd：美國便宜VPS促銷，AMD Ryzen 3900X CPU，NVMe SSD硬盤，

HTML5的離線存儲

css--圖片廊

5.React中組件通信問題

使用 CSS 追蹤用戶

使用移動自適應(yīng)布局+easy mock實(shí)現(xiàn)移動界面的簡單實(shí)現(xiàn)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Promise 的then 里發(fā)生了什么

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！