實現(xiàn)簡易 ES6 Promise 功能（二）

sPeng 發(fā)布于2019-08-19 17:28 / 3311人閱讀

摘要：今天我們接著上次的內(nèi)容繼續(xù)扯，如何實現(xiàn)數(shù)據(jù)傳遞以及當(dāng)回調(diào)函數(shù)返回一個新的上篇已完成的代碼測試代碼上面的結(jié)果，就是我們要實現(xiàn)的。然后，等到下次需要的時候，再傳給下一個回調(diào)函數(shù)。先來修改方法，因為回調(diào)函數(shù)都是在這里運行的。

上一篇文章【實現(xiàn)簡易 ES6 Promise 功能（一）】實現(xiàn)了基本的異步功能。今天我們接著上次的內(nèi)容繼續(xù)扯，如何實現(xiàn)【數(shù)據(jù)傳遞】以及當(dāng)【回調(diào)函數(shù)返回一個新的promise】

上篇已完成的代碼

function Promise(func){
    this.state = "pending";
    this.doneList = []; 
    func(this.resolve.bind(this)); 
}

Promise.prototype = {
    
    resolve: function(){
        while(true){
            if( this.doneList.length === 0 ){
                this.state = "done";
                break;
            }
            this.doneList.shift().apply(this);
        }
    },
    
    then: function(callback){ 
        this.doneList.push(callback); 
        if( this.state === "done"){
            this.state = "pending";
            this.resolve();
        }
        return this; 
    }
}

測試代碼

new Promise(function(resolve){
    resolve(1)
}).then(function(data){
    console.log(data); // 1
    return 2;
}).then(function(data){
    console.log(data); // 2
});

上面的結(jié)果，就是我們要實現(xiàn)的。resolve的參數(shù)（只傳遞第一個參數(shù)，如果有）傳遞給第一個then里面函數(shù)作為參數(shù)，第一個then里面的函數(shù)返回值傳遞給第二個then里面的函數(shù)作為參數(shù)，以此類推。

關(guān)鍵代碼

resolve: function(){
    // arguments[0]是resolve的第一個參數(shù)
    while(true){
        if( this.doneList.length === 0 ){
            this.state = "done";
            break;
        }
        // 這里是運行then里面回調(diào)函數(shù)的地方
        this.doneList.shift().apply(this);
    }
}

如何修改呢？除了第一次傳遞參數(shù)，是把resolve的參數(shù)往下傳遞，其余的都是把上次的結(jié)果作為下次開始（參數(shù)）。
于是，我們可以先把上次doneList里面的函數(shù)運行結(jié)果保存起來。然后，等到下次需要的時候，再傳給下一個回調(diào)函數(shù)。
代碼修改：

resolve: function(){
    // arguments[0]是resolve的第一個參數(shù)
    var arg = arguments[0];
    while(true){
        if( this.doneList.length === 0 ){
            this.state = "done";
            break;
        }
        // 這里是運行then里面回調(diào)函數(shù)的地方
        // 以數(shù)組形式傳給下一個函數(shù),然后保存新的值
        // 判斷傳遞的參數(shù)是否為undefined,是的話，就不用傳了
        if( typeof arg === "undefined" ){
            arg = this.doneList.shift().apply(this);
        }else{
            arg = this.doneList.shift().apply(this, [arg]);
        }   
    }
    // 保存最后的arg，保證后續(xù)的回調(diào)能繼續(xù)得到參數(shù)
    this.arg = arg;
}
// 還需要修改then方法
then: function(callback){ 
    this.doneList.push(callback); 
    if( this.state === "done"){
        this.state = "pending";
        this.resolve(this.arg); // 注意這里也要傳遞參數(shù)
    }
    return this; 
}

第一次修改完善的代碼，及測試結(jié)果

function Promise(func){
    this.state = "pending";
    this.doneList = []; 
    func(this.resolve.bind(this)); 
}

Promise.prototype = {
    resolve: function(){
        // arguments[0]是resolve的第一個參數(shù)
        var arg = arguments[0];
        while(true){
            if( this.doneList.length === 0 ){
                this.state = "done";
                break;
            }
            // 這里是運行then里面回調(diào)函數(shù)的地方
            // 以數(shù)組形式傳給下一個函數(shù),然后保存新的值
            // 判斷傳遞的參數(shù)是否為undefined,是的話，就不用傳了
            if( typeof arg === "undefined" ){
                arg = this.doneList.shift().apply(this);
            }else{
                arg = this.doneList.shift().apply(this, [arg]);
            }   
        }
        // 保存最后的arg，保證后續(xù)的回調(diào)能繼續(xù)得到參數(shù)
        this.arg = arg;
    },
    then: function(callback){ 
        this.doneList.push(callback); 
        if( this.state === "done"){
            this.state = "pending";
            this.resolve(this.arg); // 注意這里也要傳遞參數(shù)
        }
        return this; 
    }
}

// 測試
new Promise(function(resolve){
    resolve(1)
}).then(function(data){
    console.log(data); // 1
    return 2;
}).then(function(data){
    console.log(data); // 2
});

結(jié)果截圖:

今天的第一個功能已經(jīng)完了，那么現(xiàn)在開始開發(fā)第二個功能。

先看一個測試

new Promise(function(resolve){
    resolve(1)
}).then(function(data){
    console.log(data, 2); // 1,2
    return new Promise(function(resolve){
        window.setTimeout(function(){
            resolve(3);
        }, 1000);
    }).then(function(data){
        console.log(data, 4); // 3,4
        return 5;
    });
}).then(function(data){
    console.log(data, 6); // 5, 6
});

測試結(jié)果

我在上面測試?yán)又?，then回調(diào)函數(shù)中返回的promise中故意使用了延遲函數(shù)。但是，輸出結(jié)果中5往后傳了，并且[5,6]是在[3,4]之后，且都有一秒中的延遲。

如果沒有回調(diào)返回一個promise，程序會一直按照第一行走下去，就算回調(diào)中有其他promise(只要不return)，也是兩條并行的線。一旦返回promise，新的promise會在這個點插入，并且原來還沒有執(zhí)行的回調(diào)，也會排到新的回調(diào)列表后面了。

先來修改resolve方法，因為回調(diào)函數(shù)都是在這里運行的。

resolve: function(){
    // arguments[0]是resolve的第一個參數(shù)
    var arg = arguments[0];
    while(true){
        if( this.doneList.length === 0 ){
            this.state = "done";
            break;
        }
        /*************************/
        if( arg instanceof Promise ){
            // 把新的promise保存起來，待會要用
            this.promise = arg;
            // 本promise沒有執(zhí)行完的回調(diào)全部加入到新的回調(diào)列表
            arg.doneList = arg.doneList.concat(this.doneList);
            // 改變回調(diào)及狀態(tài)
            this.doneList.length = 0;
            this.state = "done";
            // 跳出循環(huán)
            break;
        }
        /*************************/
        // 這里是運行then里面回調(diào)函數(shù)的地方
        // 以數(shù)組形式傳給下一個函數(shù),然后保存新的值
        // 判斷傳遞的參數(shù)是否為undefined,是的話，就不用傳了
        if( typeof arg === "undefined" ){
            arg = this.doneList.shift().apply(this);
        }else{
            arg = this.doneList.shift().apply(this, [arg]);
        }   
    }
    // 保存最后的arg，保證后續(xù)的回調(diào)能繼續(xù)得到參數(shù)
    this.arg = arg;
}

then: function(callback){ 
    this.doneList.push(callback); 
    if( this.state === "done"){
        this.state = "pending";
        this.resolve(this.arg); // 注意這里也要傳遞參數(shù)
    }
    // 這里不能在返回this了，而是一個promise對象
    return this.promise; 
}

// 如果then沒有返回promise，那么this.promise = this;

function Promise(func){
    this.state = "pending";
    this.doneList = []; 
    func(this.resolve.bind(this));
    // 默認(rèn)指向本身
    this.promise = this; 
}

本期完整代碼

function Promise(func){
    this.state = "pending";
    this.doneList = []; 
    func(this.resolve.bind(this));
    this.promise = this; 
}

Promise.prototype = {
    resolve: function(){
        // arguments[0]是resolve的第一個參數(shù)
        var arg = arguments[0];
        while(true){
            if( this.doneList.length === 0 ){
                this.state = "done";
                break;
            }
            if( arg instanceof Promise ){
                this.promise = arg;
                arg.doneList = arg.doneList.concat(this.doneList);
                this.doneList.length = 0;
                this.state = "done";
                break;
            }
            // 這里是運行then里面回調(diào)函數(shù)的地方
            // 以數(shù)組形式傳給下一個函數(shù),然后保存新的值
            // 判斷傳遞的參數(shù)是否為undefined,是的話，就不用傳了
            if( typeof arg === "undefined" ){
                arg = this.doneList.shift().apply(this);
            }else{
                arg = this.doneList.shift().apply(this, [arg]);
            }   
        }
        // 保存最后的arg，保證后續(xù)的回調(diào)能繼續(xù)得到參數(shù)
        this.arg = arg;
    },
    then: function(callback){ 
        this.doneList.push(callback); 
        if( this.state === "done"){
            this.state = "pending";
            this.resolve(this.arg); // 注意這里也要傳遞參數(shù)
        }
        return this.promise; 
    }
}

結(jié)束。謝謝大家閱讀，如有錯誤或建議請給我留言或者發(fā)私信。

云服務(wù)器 GPU云服務(wù)器 es6中的promise jquery_promise實現(xiàn) php簡易直播功能 js簡易留言板實現(xiàn)

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

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

發(fā)表評論

登陸后可評論

0條評論

sPeng

男|高級講師

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

TA的文章

最新版碼支付源碼_碼支付源碼，可用的碼支付系統(tǒng)源碼

閱讀 2731·2021-11-23 09:51
學(xué)習(xí)筆記 | HTML 基本結(jié)構(gòu)和基本標(biāo)簽 ——前端學(xué)習(xí)第一步！

閱讀 2445·2021-09-30 09:48
云主機能掛什么-云主機有了有什么可以掛的呢？

閱讀 2082·2021-09-22 15:24
C語言函數(shù)的基本使用和遞歸

閱讀 1047·2021-09-06 15:02
Vultr機房測評 - Vultr日本Tokyo機房綜合速度和線路去程回程測試

閱讀 3360·2021-08-17 10:14
【UCloud全球大促】爆款快杰云服務(wù)器低至59元/年

閱讀 1971·2021-07-30 18:50
面試--css面試

閱讀 2007·2019-08-30 15:53
vant的PullRefresh 下拉刷新下拉過程中不斷報錯的解決辦法

閱讀 3215·2019-08-29 18:43

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

資訊專欄INFORMATION COLUMN

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

實現(xiàn)簡易 ES6 Promise 功能（二）

相關(guān)文章

實現(xiàn)簡易 ES6 Promise 功能（一）

3行代碼實現(xiàn)一個簡易版promise

js處理異步函數(shù)：從callback到promise

Week4 優(yōu)質(zhì)文章整理

Week4 優(yōu)質(zhì)文章整理

發(fā)表評論

0條評論

sPeng

男|高級講師

TA的文章

最新版碼支付源碼_碼支付源碼，可用的碼支付系統(tǒng)源碼

學(xué)習(xí)筆記 | HTML 基本結(jié)構(gòu)和基本標(biāo)簽 ——前端學(xué)習(xí)第一步！

云主機能掛什么-云主機有了有什么可以掛的呢？

C語言函數(shù)的基本使用和遞歸

Vultr機房測評 - Vultr日本Tokyo機房綜合速度和線路去程回程測試

【UCloud全球大促】爆款快杰云服務(wù)器低至59元/年

面試--css面試

vant的PullRefresh 下拉刷新下拉過程中不斷報錯的解決辦法

最新活動

資訊專欄INFORMATION COLUMN

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

實現(xiàn)簡易 ES6 Promise 功能 （二）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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

實現(xiàn)簡易 ES6 Promise 功能（二）