手動實現Promise

　　Promise對大家來說並不是很陌生，它是一個異步編程的解決方案，主要解決了前端回調地域問題。用阮老師的話說，它“就是一個容器，里面保存着某個未來才會結束的事件（通常是一個異步操作）的結果”。

　　Promise有三種狀態：pending(初始狀態)、fulfilled(成功)、reject(失敗)，初始狀態pending只能變成fulfilled或者reject，這一過程是不可逆的，當狀態發生改變時，會觸發對應的回調方法。除此之外，也支持鏈式調用，then/catch會返回一個Promise，以供鏈式調用，盜用MDN上的一張圖，Promise的執行流程如下圖所示：

　　

　　具體實現簡單分為以下四步：

　　　　1、定義一個執行器fn,自帶兩個參數的函數，resolve/reject，在實例化Promise時，調用執行器fn，傳入參數reslove/reject，初始化回調事件隊列taskList
　　　　2、在執行then方法時，判斷是不是初始狀態pending，如果是，則將then中fullfilled/reject的回調推進執行隊列taskList中，then方法返回一個promise實例
　　　　3、實現鏈式回調中，用id來標識不同的promise實例
　　　　4、當觸發了執行器中參數函數時，根據id來判斷當前執行的回調方法

　　實現代碼：

 //公共變量，用於標識MyPromise實例
        index = 0;
        //promise接收一個回調函數fn,有兩個參數，reslove,reject
        function MyPromise(fn) {
            var _this = this;
            //promise的三種狀態
            this.RESOLVE = "fullfilled";
            this.PENDING = "pending";
            this.REJECT = "reject";
            this.id = index++;
            //初始默認狀態為penddding
            this.state = this.PENDING;
            //執行任務列表
            this.taskList = [];
            //最終執行的回調
            this.finallyCallback = null;
            //bind改變reslove/reject函數體內this的指向，確保指向MyPromise
            fn.call(this, this.resolve.bind(this), this.reject.bind(this));
        }

        MyPromise.prototype.resolve = function(value) {
            this.state = this.RESOLVE;
            //2、狀態變更時，執行完成的方法
            this.taskList[this.id] && this.handler(this.taskList[this.id], value);
        };

        MyPromise.prototype.reject = function(value) {
            this.state = this.REJECT;
            //2、狀態變更時，執行完成的方法
            this.taskList[this.id] && this.handler(this.taskList[this.id], value);
        };
        //執行任務回調
        MyPromise.prototype.handler = function(task, value) {
            var result = null;
            if (this.state === this.RESOLVE) {
                result = task.onFullFilled(value);
            } else if (this.state === this.REJECT) {
                result = task.onReject(value);
            }
            var nextId = this.id + 1;
            //需要判斷返回值是不是MyPromise實例，如果是，將之前的任務隊列賦值給新的MyPromise實例
            if (result instanceof MyPromise) {
                result.id = nextId;
                result.taskList = this.taskList;
                result.finallyCallback = this.finallyCallback;
            } else {
                //沒有返回MyPromise實例
                //如果有finally回調，則執行最終的回調
                this.finallyCallback && this.finallyCallback();
            }
        };
        //onFullFilled：成功的回調，onReject：失敗的回調
        MyPromise.prototype.then = function(onFullFilled, onReject) {
            var _this = this,
                obj = {
                    onFullFilled: onFullFilled,
                    onReject: onReject
                };
            //1、初始化時，將后續可能要執行的任務推送到執行任務隊列中
            if (this.state === this.PENDING) {
                this.taskList.push(obj);
            }
            //返回一個promise，支持鏈式調用
            return this;
        };

        //最終執行的方法,不管MyPromise的狀態如何
        MyPromise.prototype.finally = function(callback) {
            this.finallyCallback = callback;
        };

　　測試代碼：

 var cc = new MyPromise(function(reslove, reject) {
            setTimeout(function() {
                reslove(2);
            }, 500);
        });
        var dd = new MyPromise(function(reslove, reject) {
            setTimeout(function() {
                reject(3);
            }, 500);
        });
        cc.then(function(num) {
                console.log(num);
                return dd;
            })
            .then(
                function(cc) {
                    console.log(cc);
                },
                function(e) {
                    console.log(5);
                }
            )
            .finally(function() {
                console.log("Game Over");
            });
        console.log(1);

　　執行結果：

　　

 　　實現過程簡單粗暴，如有問題，煩請指出，謝謝！