摘要：手寫(xiě)一款符合規(guī)范的長(zhǎng)篇預(yù)警有點(diǎn)長(zhǎng)，可以選擇性觀看。初始狀態(tài)是，狀態(tài)可以有或者不能從轉(zhuǎn)換為或者從轉(zhuǎn)換成即只要由狀態(tài)轉(zhuǎn)換為其他狀態(tài)后，狀態(tài)就不可變更。

長(zhǎng)篇預(yù)警！有點(diǎn)長(zhǎng)，可以選擇性觀看。如果對(duì)Promise源碼不是很清楚，還是推薦從頭看，相信你認(rèn)真從頭看到尾，并且去實(shí)際操作了，肯定會(huì)有收獲的。主要是代碼部分有點(diǎn)多，不過(guò)好多都是重復(fù)的，不必?fù)?dān)心

Promise的一些用法在此不多贅述，本篇主要帶領(lǐng)你手寫(xiě)一個(gè)Promise源碼，學(xué)完你就會(huì)發(fā)現(xiàn)：Promise沒(méi)有你想象中的那么難

實(shí)現(xiàn)簡(jiǎn)單的同步Promise

增加異步功能

增加鏈?zhǔn)秸{(diào)用then

增加catch finally方法

增加all race 等方法

實(shí)現(xiàn)一個(gè)promise的延遲對(duì)象defer

最終測(cè)試

實(shí)現(xiàn)簡(jiǎn)單的同步Promise

先大概說(shuō)一下基本概念：
Promise內(nèi)部維護(hù)著三種狀態(tài)，即pending,resolved和rejected。初始狀態(tài)是pending，狀態(tài)可以有pending--->relolved,或者pending--->rejected.不能從resolve轉(zhuǎn)換為rejected 或者從rejected轉(zhuǎn)換成resolved.
即 只要Promise由pending狀態(tài)轉(zhuǎn)換為其他狀態(tài)后，狀態(tài)就不可變更。
ok.知道了這些后，我們開(kāi)始手?jǐn)]代碼：

注意觀看序號(hào) 1 2 3 4 5 ...

function Promise(executor){
    let that = this;
    /** 2 定義初始的一些變量 */
    that.status = "pending";
    that.value = null;
    that.reason = null;
    
    /** 3 定義初始的成功和失敗函數(shù) */
    function resolve(value){
        /** 4 判斷狀態(tài)是不是初始狀態(tài)pending 
         *    是就轉(zhuǎn)換狀態(tài) 否則不轉(zhuǎn)換 
         *    確保狀態(tài)的變化后的不可變性 */
        if(that.status === "pending"){
            that.status = "resolved";
            that.value = value;
        }
    }
    function reject(reason){
        /** 5 同上 */
        if(that.status === "pending"){
            that.status = "rejected";
            that.reason = reason;
        }
    }
    /**
     * 1 Promise中首先傳了一個(gè)executor，它是一個(gè)函數(shù)
     *   executor函數(shù)中又傳了兩個(gè)函數(shù)，分別是resolve和reject
     *   很顯然 resolve是成功回調(diào)，reject是失敗的回調(diào)
     */
    executor(resolve,reject);
}

/** 6 在Promise原型上面定義then方法
 *    then方法上面有兩個(gè)回調(diào) 一個(gè)是成功后的方法 另一個(gè)是失敗后的方法
 *    根據(jù)成功或失敗的狀態(tài)去執(zhí)行相關(guān)成功onFilfulled()或者失敗onRejected()的回調(diào)方法
 */
Promise.prototype.then = function(onFilfulled,onRejected){
    let that = this;
    if(that.status === "resolved"){
        /** 7 如果狀態(tài)已經(jīng)變更為resolved 
         *    說(shuō)明resolve方法已經(jīng)被調(diào)用
         *    那么此時(shí)就執(zhí)行成功的回調(diào)函數(shù)onFilfulled
         *    并傳入?yún)?shù) that.value
         * */
        onFilfulled(that.value);
    }
    if(that.status === "rejected"){
        /** 8 同上
         *    傳入?yún)?shù) that.reason
         */
        onRejected(that.reason);
    }
}

module.exports = Promise;

通過(guò)require()引入手?jǐn)]的Promise

let Promise = require("./myPromise");

let p1 = ()=>{
    return new Promise((resolve,reject)=>{
        resolve("success.1");
    });
}

p1().then((data)=>{
    console.log(data); // 打印 success.1
},(err)=>{
    console.log(err);
});

ok.經(jīng)調(diào)用發(fā)現(xiàn) 此代碼可以實(shí)現(xiàn)部分Promise的功能，但僅僅是同步下才有效果。
那異步呢？ 別急這就來(lái)~：

增加異步功能

注意觀看序號(hào) 1 2 3 4 5 ...

function Promise(executor){
    let that = this;
    that.status = "pending";
    that.value = null;
    that.reason = null;
    /** 1 因?yàn)楫惒讲皇橇⒓磮?zhí)行 狀態(tài)不會(huì)變更 成功或失敗的回調(diào)函數(shù)也不會(huì)執(zhí)行
     *    所以先定義好存放成功或失敗回調(diào)函數(shù)的數(shù)組 
     *    以便將成功或失敗的回調(diào)函數(shù)先保存起來(lái)
     * */
    that.onFilFulledCallbacks = [];
    that.onRejectedCallbacks = [];

    function resolve(value){
        if(that.status === "pending"){
            that.status = "resolved";
            that.value = value;
            /** 3 發(fā)布
             *    等待狀態(tài)發(fā)生變更
             *    狀態(tài)變更后 立即執(zhí)行之前存放在相應(yīng)數(shù)組中所有的成功或失敗的回調(diào)函數(shù)
             *    即 發(fā)布
             */
            that.onFilFulledCallbacks.forEach((fn)=>{
                fn();
            });
        }
    }
    function reject(reason){
        if(that.status === "pending"){
            that.status = "rejected";
            that.reason = reason;
            /** 4 同上 */
            that.onRejectedCallbacks.forEach((fn)=>{
                fn();
            });
        }
    }
    executor(resolve,reject);
}

Promise.prototype.then = function(onFilfulled,onRejected){
    let that = this;
    if(that.status === "resolved"){
        onFilfulled(that.value);
    }
    if(that.status === "rejected"){
        onRejected(that.reason);
    }
    /** 2 訂閱
     *    因?yàn)槭钱惒?狀態(tài)當(dāng)時(shí)并沒(méi)有立即變更 所以狀態(tài)還是pending
     *    此時(shí)需要把成功或者失敗的回調(diào)函數(shù)存放到對(duì)應(yīng)的數(shù)組中
     *    等待狀態(tài)變更時(shí) 再?gòu)臄?shù)組中拿出來(lái)去執(zhí)行
     *    即 訂閱
     *    *存放數(shù)組時(shí) 為了執(zhí)行時(shí)方便 需要把回調(diào)函數(shù)的外層包裹一層空函數(shù)
     */
    if(that.status === "pending"){
        that.onFilFulledCallbacks.push(function(){
            onFilfulled(that.value);
        });
    }
    if(that.status === "pending"){
        that.onRejectedCallbacks.push(function(){
            onRejected(that.reason);
        });
    }
}

module.exports = Promise;

代碼測(cè)試：

let Promise = require("./myPromise");

let p1 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve("success.1");
            // reject("fail.");
        },1500);
    });
}

p1().then((data)=>{
    console.log(data); // success.1
},(err)=>{
    console.log(err);
});

可以看到 1.5s后 執(zhí)行了resolve() 并打印了success.1，至此，我們實(shí)現(xiàn)了異步的Promise.其實(shí)這里的實(shí)現(xiàn)異步的思想就是發(fā)布訂閱.

en～ok.高能預(yù)警