ES6 Promise运行机制解析

内容参考：

阮一峰 - JS运行机制
MDN - Promise构造函数
MDN - 使用Promise
美团Promise解析

偶然回忆起js异步操作的点点滴滴，又想起用了一年的Promise，哎？兄弟，你到底是个什么东西？？？

先摆个你一定看不懂的图然后我们慢慢来。（看不懂千万不要假装骗自己哦~）

Promise.png

单线程

JavaScript是单线程机制，为什么是单线程因为如果存在两个线程同时修改dom，dom会不知所措（Android系统也是只允许在主线程中更新UI）
所以既然没有多线程做并发，只能设计出异步任务。
JavaScript的所有网络操作，浏览器事件，都必须是异步执行，那么我们怎么做异步任务呢？

1 ES5回调函数
2 ES6 Promise
3 ES7 async/await

回调函数我们很熟，也知道它的著名缺陷 - 回调炼狱

async1(function(){
    async2(function(){
        async3(function(
            async4(funciton(){
                async5(function(){
                    //(╯°°）╯︵┻━┻
                    //...
                });
            });
        )); 
    });});

Promise 用链式调用解决了这一烦恼:

function doingSome(a){
    return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve(a+1)
            },1500)
            })
}
doingSome(1).then(function(newResult){
    console.log('第一个promise :' + newResult)
    return doingSome(newResult)
}).then(function(result){
    console.log('第二个promise：'+result)
})

But

知道这些可以满足我们的好奇心么 ？？？
它的设计模式，代码结构才是我钟意的地方。
去MDN翻翻Promise构造方法的参数，方法，执行描述，额，疑问一大堆啊，其中有一句：

Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象

啥，我们创建一个Promise后，它返回一个新的Promise，为什么不返回自己然后重用？

Promise构造函数执行时立即调用executor 函数，executor 函数在Promise构造函数返回新建对象前被调用， resolve 和 reject 两个函数作为参数传递给executor。resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）

所以说executor到底是什么时候被调用的，resolve和reject做了什么骚操作？

then和catch在executor执行后被执行，那么failureCallback和successCallback在executor执行时还没传入，那如果我们的executor中直接同步调用resolve或者reject呢？

new Promise(function(resolve, reject){
  resolve()
}).then(function(){
  // here is successCallback
})

试验结果还是可以调用到successCallback，执行executor时还在构造函数方法中，都还没调用then方法，你怎么得到successCallback的？？？

先做一些小实验测试一下

运行结果.png

首先Promise构造函数并没有返回值

executor调用了resolve后，将-当前-Promise对象状态改为了：resolved

接着实验：

image.png

这里可以确定then方法返回了一个新的Promise
我们去除延迟，再试一遍：

image.png

在then方法内部就把successCallback给执行了，最后返回新的Promise对象。
这样看来resolve感觉像是做了setTimeout 0处理，使它处于任务队列底部，最后被执行。

我们怎么知道它的真正实现呢？源码找不到，我们看看别人博客吧，我看到很多什么自己实现一个Promise这种文章，但是呢，他们的resolve实现都是用setTimeout 0，我就很疑惑，难道浏览器也是这么实现的？

其实不准确，我们看规范好吧，Promise A+规范
这里有一段话很重要（google翻译后的）

image.png
浏览器就是用setTimeout，Nodejs就是process.nextTick（所提及的任务机制暂时不懂,不过可以参考：JS并发模型）

那resolve的实现过程就应该是这样的：

function(val) {
  var _this= this;
  if (this.status == 'pending') {
    this.status = 'resolved';
    this.value=val;
    setTimeout(function() {
      _this.resolveFunc(_this.value);
    }, 0);
  }
}

MDN有一段话也可以帮助我们理解：

image.png

为什么then要返回一个新的Promise？

MDN 对于then方法的解释：

image.png

如果successCallback或者failureCallback返回的是一个Promise呢 ？
还有一段解释：

image.png
我想说如果你在回调函数中还返回了一个Promise，就像我们上面用的链式调用的例子：

doingSome(1).then(function(newResult){
    console.log('第一个promise :' + newResult)
    return doingSome(newResult)
}).then(function(result){
    console.log('第二个promise：'+result)
})

那么恭喜你，我们这里出现了三个Promise，我们要分析三个Promise在一次链式调用中的作用。。。
我们解释下：“任何被添加给 promise2 的回调函数都会被排在 successCallback 或 failureCallback 返回的 Promise 后面”

上面第二个then添加了一个successCallback，它说会被我们第一个then的successCallback返回的doingSome中的Promise调用，非常乱，不错有人已经帮我理清楚了，没错，我们借鉴一下：

彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)

我们看下他的then方法怎么写的：

MyPromise.prototype.then = function(resolveFunc, rejectFunc) {
  var self = this;
  return new MyPromise(function(resolve_next, reject_next) {
    function resolveFuncWrap() {
      var result = resolveFunc(self.value);
      if (result && typeof result.then === 'function') {
        //如果result是MyPromise对象，则通过then将resolve_next和reject_next传给它
        result.then(resolve_next, reject_next);
      } else {
        //如果result是其他对象，则作为参数传给resolve_next
        resolve_next(result);
      }
    }
    function rejectFuncWrap() {
      var result = rejectFunc(self.value);
      if (result && typeof result.then === 'function') {
        //如果result是MyPromise对象，则通过then将resolve_next和reject_next传给它
        result.then(resolve_next, reject_next);
      } else {
        //如果result是其他对象，则作为参数传给resolve_next
        resolve_next(result);
      }
    }
    self.resolveFunc = resolveFuncWrap;
    self.rejectFunc = rejectFuncWrap;
  })
}

最开始调用的Promise我们这里称为Promise_1，then中直接return的Promise我们称为 Promise_2，回调函数中返回的Promise我们称为Promise_3

Promise_2的目的就是链式then的书写，因为then返回的是一个Promise自然可以执行then方法。
内部的逻辑就是封装callback，让callback执行的时候可以执行Promise_2的then的successCallback

这个“让callback执行的时候可以执行Promise_2的then的successCallback”就对应了两种情况：

1. Promise_1的callback返回了Promise
   我们关键代码：

result.then(resolve_next, reject_next);

将Promise_2和Promise_3神奇的串在了一起，
如果Promise_3调用了resolve，那么就执行Promise_2的resolve，Promise_2的resolve不就接着执行Promise_2的successCallback么，最后等同于：Promise_2 的successCallback变成了Promise_3的

---

2. 返回了非Promise
   直接执行Promise_2的successCallback或者failureCallback

错误传播的特性

基本上，一个 Promise 链式遇到异常就会停止，查看链式的底端，寻找catch处理程序来代替当前执行。在同步的代码执行之后，这是非常模型化的。
这化作了两个特性：

1. 遇到异常或者调用reject会去顺着链式向下找一个catch执行
2. 如果遇到异常或者调用reject，会直接执行catch然后继续catch下面的代码，catch之前都不会执行
   举例：

function doingSome(a){
    return new Promise(function(resolve,reject){
            setTimeout(function(){
                reject(a+1)
            },1500)
            })
}
doingSome(1).then(function(result){
    console.log(result)
    return result
}).then(function(result){
    console.log(result)
    return result
}).then(function(result1){
    console.log(result)
    return result
}).catch(function(result){
    console.log('failed: ' + result)
    return result
}).then(function(result){
    console.log(result)
    return result
})

输出：
failed: 2
2

---

（别的实现细节暂且不提，错误请指正！）

THE END