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

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

測(cè)試代碼

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

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

關(guān)鍵代碼

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

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

resolve: function(){
    // arguments[0]是resolve的第一個(gè)參數(shù)
    var arg = arguments[0];
    while(true){
        if( this.doneList.length === 0 ){
            this.state = "done";
            break;
        }
        // 這里是運(yùn)行then里面回調(diào)函數(shù)的地方
        // 以數(shù)組形式傳給下一個(gè)函數(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; 
}

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

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

Promise.prototype = {
    resolve: function(){
        // arguments[0]是resolve的第一個(gè)參數(shù)
        var arg = arguments[0];
        while(true){
            if( this.doneList.length === 0 ){
                this.state = "done";
                break;
            }
            // 這里是運(yùn)行then里面回調(diào)函數(shù)的地方
            // 以數(shù)組形式傳給下一個(gè)函數(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; 
    }
}

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

結(jié)果截圖:

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

先看一個(gè)測(cè)試

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

測(cè)試結(jié)果

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

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

先來(lái)修改resolve方法，因?yàn)榛卣{(diào)函數(shù)都是在這里運(yùn)行的。

resolve: function(){
    // arguments[0]是resolve的第一個(gè)參數(shù)
    var arg = arguments[0];
    while(true){
        if( this.doneList.length === 0 ){
            this.state = "done";
            break;
        }
        /*************************/
        if( arg instanceof Promise ){
            // 把新的promise保存起來(lái)，待會(huì)要用
            this.promise = arg;
            // 本promise沒(méi)有執(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;
        }
        /*************************/
        // 這里是運(yùn)行then里面回調(diào)函數(shù)的地方
        // 以數(shù)組形式傳給下一個(gè)函數(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了，而是一個(gè)promise對(duì)象
    return this.promise; 
}

// 如果then沒(méi)有返回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的第一個(gè)參數(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;
            }
            // 這里是運(yùn)行then里面回調(diào)函數(shù)的地方
            // 以數(shù)組形式傳給下一個(gè)函數(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é)束。謝謝大家閱讀，如有錯(cuò)誤或建議請(qǐng)給我留言或者發(fā)私信。