理解异步之美：Promise与asyncawait（二）

承上启下

理解异步之美：Promise与async await（一）

成都创新互联-专业网站定制、快速模板网站建设、高性价比江源网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式江源网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖江源地区。费用合理售后完善，10余年实体公司更值得信赖。

经历了上一篇基础的Promise讲解后我觉得大家对于promise的基本用法和想法就有一定了解了。（就是一种承诺哟）

下面我们要去了解一下它的工作流程。

结合源码与分析别人的常见实现进行理解

下面是别人实现的总源码，（简单一看就可以）

var PENDING = 0;
var FULFILLED = 1;
var REJECTED = 2;
function Promise(callback) {
    this.status = PENDING;
    this.value = null;
    this.defferd = [];
    setTimeout(callback.bind(this, this.resolve.bind(this), this.reject.bind(this)), 0);
}
    Promise.prototype = {
        constructor: Promise,
        resolve: function (result) {
            this.status = FULFILLED;
            this.value = result;
            this.done();
        },
        reject: function (error) {
            this.status = REJECTED;
            this.value = error;
        },
        handle: function (fn) {
            if (!fn) {
                return;
            }
            var value = this.value;
            var t = this.status;
            var p;
            if (t == PENDING) {
                this.defferd.push(fn);
            } else {
                if (t == FULFILLED && typeof fn.onfulfiled == 'function') {
                    p = fn.onfulfiled(value);
                }
                if (t == REJECTED && typeof fn.onrejected == 'function') {
                    p = fn.onrejected(value);
                }
                var promise = fn.promise;
                if (promise) {
                    if (p && p.constructor == Promise) {
                        p.defferd = promise.defferd;
                    } else {
                        p = this;
                        p.defferd = promise.defferd;
                        this.done();
                    }
                }
            }
        },
        done: function () {
            var status = this.status;
            if (status == PENDING) {
                return;
            }
            var defferd = this.defferd;
            for (var i = 0; i < defferd.length; i++) {
                this.handle(defferd[i]);
            }
        },
        then: function (success, fail) {
            var o = {
                onfulfiled: success,
                onrejected: fail
            };
        var status = this.status;
        o.promise = new this.constructor(function () {});
        if (status == PENDING) {
            this.defferd.push(o);
        } else if (status == FULFILLED || status == REJECTED) {
            this.handle(o);
        }
        return o.promise;
        }
    };

这是网上一份常见的Promise的源码实现我会对这个进行一个分析
（肯定有人问为什么不自己实现一个？解：省时、网上太多了、本质还是要了解思想）

话不多说开始咯

咱们先大体梳理一下实现的东西要能干什么？

first ：

let promsie = new Promise((resolve,reject)=>{
    doSomething()
})
根据这个构造函数，我们需要实现两个方法，resolve、reject方法。

second :

promise.then(res=>{
    doSomethingRes();
},rej=>{
    doSomenthingRej()
})
我们要实现一个then方法，可以去根据不同状态来执行不同的函数。

最基本的两个内容我们已经确定了。

话不多说开始分析代码。

对代码的分析在内容的注释上大家不要遗漏哈！！！

第一段构造函数与状态设定

// 首先声明三个状态，
// 状态的就是上一节说的：事情是进行中、已完成、失败了。
// 这三种状态遵循着PENDING->FULEFILLED 或者PENDING->REJECTED
var PENDING = 0;
var FULFILLED = 1;
var REJECTED = 2;
// Promise构造函数接收u一个回调函数
function Promise(callback) {
    // 新new出来的实例的status一定是PENDING.
    this.status = PENDING;
    // value是指当你事情完成、失败后内部保存的值
    // 用法是resolve（42） 在then函数的res=>{dosomething（）res就是42
    }
    this.value = null;
    // defferd 字面意思推迟、是个数组，存放这个promise以后要执行的事件
    // 类比发布订阅模式（观察者模式）。存放观察者在被观察者身上订阅的事件列表
    // defferd内的事件存放着日后观察者要执行的事件。
    this.defferd = [];
    // setTimeout异步的去执行new 一个promise实例内执行的任务，不去阻塞主线程。
    //这一段代码我有一点疑惑,new promise实例时，callback的执行并不是异步的。
    // 而这里选择异步的并不是很合理。
    // bind函数的作用。callback的参数如何指定？通过bind方法将函数函数柯里化（Currying 和一个NBA球星的名字一样很好记）
    // 而且绑定函数的this执行。函数内的this都执行这个new 出来的promise实例
    // 去指定函数执行时的参数，将resolve方法与reject方法强制做为callback的参数。
    // 所以我们写的回调函数，参数怎么命名都可以执行到对应的resolve与reject方法
    setTimeout(callback.bind(this, this.resolve.bind(this), this.reject.bind(this)), 0);
}

自己实现与官方Promise执行的对比。大家可以看一下这个setTimeout导致的执行顺序问题。所以阅读别人对各种功能实现时要学会对照的去看。
理解异步之美：Promise 与 async await（二） cdn.xitu.io/2018/8/18/1654c206c85e9099?w=1124&h=440&f=png&s=88739">

理解异步之美：Promise 与 async await（二）

到这里伙伴们已经了解了我们new 一个构造函数时都会做哪些事情。

1:对promise实例定义一个状态，值为PENDING。

2:给promise实例定义一个存放值的空间。

3:设置一个发布列表，在以后的指定时间发布其中的事件。

4:通过bind函数将callback柯里化，使callback执行时调用对应的resolve与reject方法，并执行callback

第二段 resolve reject then方法的分析

为什么先说这三个方法。
因为resolve、reject是核心方法，不说都不行，可是resolve与reject完成要做的事情必须是then方法指定的所以三个方法之间关系密切。

// 在Promise的原型对象上指定这些方法。
// 这种做法有很大弊端、并且Promise源码也并不是这么做的之后会进行分析
Promise.prototype = {
        // 覆盖式的指定Promise的原型对象会导致constructor属性丢失
        // 在这里进行填补，手动指定Promise原型对象上的constructor属性
        constructor: Promise,
        // resolve方法开始 接收一个结果（可以为空）
        resolve: function (result) {
            //更改状态为FULFILLED。
            this.status = FULFILLED;
            // 将result存放在之前构造函数中提到的存放结果的空间中
            this.value = result;
            // done方法。表示执行完毕（后面会继续将）
            this.done();
        },
        // 与resolve方法类似 不多做解释
        reject: function (error) {
            // 状态更改
            this.status = REJECTED;
            this.value = error;
            // 没有done函数，这块做法很有问题下面会配图解释。
        },
        // then方法开始要好好讲讲
        // success表示状态变成FULFILLED时要执行的函数
        // fail表示状态变成REJECTED时要执行的函数
        then: function (success, fail) {
        // 声明一个对象来存放这些事件。
            var o = {
                onfulfiled: success,
                onrejected: fail
            };
        // 获取当前promise的状态。
        // 这个的意义是，我们对promise实例执行then方法的时候有两种情况
        // 一：promise实例的内容还没有执行完毕。二：promise实例内容已经执行完毕并且状态已经改变。继续下面。
        var status = this.status;
        o.promise = new this.constructor(function () {});
        // 如果状态是PENDING，表示实例内容还未执行完毕。
        // 说明then方法指定在某种状态要执行的事件是未来发生的现在并不执行。
        // 所以将o放入defferd订阅列表中。
        // 这个之前讲过defferd中的内容会在某个条件触发后会执行。
        // 所以当promise实例内容还未完成就要把未来执行的方法放入订阅列表
        if (status == PENDING) {
            this.defferd.push(o);
        // 对应之前说的情况二    
        // 状态变成以下两种情况怎么办？
        // 订阅列表内不应该有当前情况的o。
        // 所以要立即执行当前指定的事件，而且未来的任何情况下这次指定的事件也不会执行。
        //所以不会放入defferd中
        } else if (status == FULFILLED || status == REJECTED) {
           // 执行handle函数
            this.handle(o);
        }
        // then方法存在链式调用，then方法的返回值必须是一个promise对象
        return o.promise;
        }
    };

到这里我们大体梳理清楚，resolve、reject、then方法的用处。

提一嘴 reject方法没有执行done函数会导致以下情况

理解异步之美：Promise 与 async await（二）

一：在new promise实例过程中执行的callback函数，在函数执行的过程中肯定会调用resolve或者reject（两个都调用也可能）。当调用了resolve方法之后会改变promise的状态，存放结果。表示任务完成，执行done函数。（reject就不再来一遍了）

二：then方法的执行事件与resolve方法没有任何先后顺序可言。随心所欲谁在前面都不一定。在resolve（reject）之前执行，就注册一下要执行的事件。在resolve（reject）之后执行就直接执行就可以了，并且不要注册。

第三段具体是怎么执行的呢？聊聊done与handle

同学们按照代码执行的顺序，我们应该先去看done方法。然后再看handle所以辛苦一下，先向下一点找到可爱的done方法。

// 看完done方法的朋友肯定对我这种方式很闹心，保证你们看的热情嘛。哈哈哈哈哈
// 没看done方法的快回去看、快回去看。
// 必须提一下 下面一直说的o是什么？ o是在then方法中传入defferd数组中的对象，一下简称为o。
// handle是干嘛的？？？ 那是用来执行o的。o里面放着我们想要执行的内容
// 大家再回忆以下，handle还在哪里执行了？想起来了吧，当then方法执行时
// 如果状态已经改变了。那么就直接handle（o），执行你要做的事情。
handle: function (fn) {
    // o不存在的？？？妈耶，咋办呀。那就是defferd中没东西。好吧什么都不做
    if (!fn) {
        return;
    }
    var value = this.value;
    var t = this.status;
    var p;
    // 如果状态为PENDING，表示还没到o要执行的内容。那么不能执行的？
    if (t == PENDING) {

        this.defferd.push(fn);
    } else {
        // 这里面很容易看的，状态变成FULFILLED，
        //并且你在给状态是FULFILLED时要做的事情可以执行（函数才能执行呀，你写个字符串不报错了？？）
        // 执行咯。这里面大家一看就知道，你then方法里面res=>{doSometthing(res)}
        //这个res就是promise内存放的结果（value）。
        if (t == FULFILLED && typeof fn.onfulfiled == 'function') {
            p = fn.onfulfiled(value);
        }
        // 不多提了。
        if (t == REJECTED && typeof fn.onrejected == 'function') {
            p = fn.onrejected(value);
        }
        // 但是这个p是干什么的？？？？
        // 存放方法的返回值，为了链式调用。实现链式调用的是什么方法？
        // 返回的o.promise. 那么返回的o.promise不存在呢？（当然这是不可能的）
        // 那就没有链式调用。
        // promise中有一个方法，当then函数内的事件（指的这个函数：res=>{}）
        // 返回值是一个promise对象时，那么then的返回值就是这个promise对象
        // 链式中的下一个then就会等待这个promise执行完毕。
        // 如果不是promise对象怎么办？那么就执行链条后面的then方法注册的事情。
        var promise = fn.promise;
        if (promise) {
            // 如果你注册的事件执行后的返回值是一个promise对象
            if (p && p.constructor == Promise) {
                // 当前这个p（是个promise对象）可以把o.promise对象订阅列表内的事件拿过来。
                // 串行后，返回的promise继续控制着defferd的内容。
                //理论上讲,按刚才的逻辑来写，每个promise对象内的defferd，都应该只有一个值。
                // 因为串行的链条每个then注册的事件都在上一个then返回的o.promise的defferd内。
                // 那么为什么？defferd要写个数组呢？？？这是我疑惑的地方但是影响不大
                p.defferd = promise.defferd;
            } else {
               // 如果不是promise呢？那么就把当前的promise对象当作你的返回值
               // 继续继承o.promise里面的defferd
                p = this;
                p.defferd = promise.defferd;
                // 并没有任何承诺，p应该就是一个resolved（reject）状态
                // 直接执行done方法就可以啦。
                this.done();
            }
        }
    }
},
// done方法是在resolve方法（reject为啥没写之前有讲过）中执行的，表示resolve方法执行完毕了。
// 这个完毕是一种明确信号，那就是之前说好的状态变成FULFILLED我要做的那些事情。
// 乡亲们、弟兄们咱们可以被执行了
done: function () {
    // 当然为了保险起见PENDING状态肯定不会执行，return掉。
    // done函数在PENDING状态也不会被调用呀。双重保险嘛
    var status = this.status;
    if (status == PENDING) {
        return;
    }
    // 乡亲们、兄弟们在哪呢？就在你的defferd中。我们的订阅列表内的兄弟们该执行了。
    // 遍历以下我们的defferd对象，谁也别漏下都给我执行了。
    var defferd = this.defferd;
    for (var i = 0; i < defferd.length; i++) {
    // 问题来了乡亲们不是函数是一个对象啊。
    //为啥是对象？在then方法中有defferd.push(o);o是啥？是个对象啊。
    // 那咋执行？？？？需要一个特定来执行o的方法，就是handle。
    // 好了伙伴们可以把文章回到上面一点了。
        this.handle(defferd[i]);
    }
},

这一段我已经把handle与done方法说完了。主要是为了链式调用。才会设计的这样子。所以链式调用还是很抢手的一个功能。
自己也可以尝试的去实现一下符合promise规范的promise功能。

亲！学习完要思考

不知道看到这里大家对网上常见的promise源码实现有一种什么样的感觉？？？

我先说说我的感觉

看过源码（抱歉我的智商是在有限，短时间内是真的看不懂啊），觉得源码做的要合理太多了。看不懂我都觉得合理。。。。不是对强者的过分崇拜，而是真的很合理。网上常见的实现，只是单单的实现了功能，这样的promise只适合有一定promise经验并且守规矩的人使用。为什么这么说？？？

一：这样实现的promise，状态可以随时人为的更改，对外暴露，没有设置为私有属性。

二：为了方便，选择把方法设置在原型链上，导致无法使用私用变量。

三：reject的执行不足，只是对resolve进行合理的使用。

虽然我这么说，我也实现不出来，写出这些的人还是比我厉害很多

promise的源码则是（某个版本的，版本号我不记得了）

把resolve、reject、all、race，handle方法，都放在构造函数内。

把catch、then、chain方法放在原型上。

理解异步之美：Promise 与 async await（二）
有图为证，字面意思应该是这个意思，我觉得我没想错。
在改变promise的状态也好、value也好。都在频繁的使用PromiseSet方法来设置属性，对方法进行封装，并且方便状态的管理，附加合理的容错。

理解异步之美：Promise 与 async await（二）

对比源码之后，觉得自己虽然流程大体了解，但是这种精密而且优雅的方式，是短时间内很难去掌握的。promise的源码当然会坚持看下去，网上能把promise按照规范实现一遍的人已经很厉害了。我虽然觉得还有地方可以修改，但是我比他们还差的远（这种感觉就有点像：我不上，我就比比），要向他们学习，照这他们去努力。

别说了喝鸡汤吧

前端的学习之路还很漫长，我看过的（仅仅是看过的）源码半只手就都数的过来。还是坚信坚持下去，自己就变得很棒。每个人都是从控制流语句学过来的，逻辑也不过是复杂的控制流程（还涉及高端的算法与设计模式），坚信自己一定可以成功！！！一起努力吧每一个前端er（boy and girl）。所以一切源码层面看不懂、不理解都可以归结为看得少、想得少、理解的少。（和你的智商没有任何关系哟）

下期预告

下一篇就是理解异步之美的终点篇了。异步的美好在于这种神奇的思想。抓住思想的尾巴，不被技术束缚，嘿嘿嘿。

要开新课题了。课题应该是围绕着vue-router的源码进行学习。一个与大家分享学习过程的周期性文章。尽情期待！！！

网页标题：理解异步之美：Promise与asyncawait（二）
浏览路径：http://mswzjz.cn/article/pcpgog.html

网站建设知识

理解异步之美：Promise与asyncawait（二）

承上启下

结合源码与分析别人的常见实现进行理解

话不多说开始咯

咱们先大体梳理一下实现的东西要能干什么？

对代码的分析在内容的注释上大家不要遗漏哈！！！

第一段构造函数与状态设定

第二段 resolve reject then方法的分析

提一嘴 reject方法没有执行done函数会导致以下情况

第三段具体是怎么执行的呢？聊聊done与handle

亲！学习完要思考

我先说说我的感觉

虽然我这么说，我也实现不出来，写出这些的人还是比我厉害很多

别说了喝鸡汤吧

下期预告

其他资讯

网站建设知识

理解异步之美：Promise与asyncawait（二）

承上启下

结合源码与分析别人的常见实现进行理解

话不多说开始咯

咱们先大体梳理一下实现的东西要能干什么？

对代码的分析在内容的注释上大家不要遗漏哈！！！

第一段构造函数与状态设定

第二段 resolve reject then方法的分析

提一嘴 reject方法没有执行done函数会导致以下情况

第三段 具体是怎么执行的呢？聊聊done与handle

亲！ 学习完要思考

我先说说我的感觉

虽然我这么说，我也实现不出来，写出这些的人还是比我厉害很多

别说了 喝鸡汤吧

下期预告

其他资讯

第三段具体是怎么执行的呢？聊聊done与handle

亲！学习完要思考

别说了喝鸡汤吧