手动实现Promise

Promise _ MDN地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/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;
        };

调用：

  // 调用 MyPromise
  var cc = new MyPromise(function (reslove, reject) {
    setTimeout(function () {
      reslove(2);
    }, 200);
  })

  cc.then(function (num) {
    console.log(num, '11');    //reslove 结果
  }, function(err) {
    // console.log(err, '22')  //reject 结果
  })