Promise 执行机制–原理–规范[通俗易懂]

读取本文章前相信你已经理解完毕promise的基本用法了，如果没有请前去参考阅读阮一峰老师的es6教程。

1.Promise异步与标准

首先promise是属于javescript的，javescript是一门单线程语言。javescript的多先程是用单线程模拟出来的。并不是完全意义上的多线程。

1.1 异步

promise是异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一。

1.2 promiseA+

promise最早由社区提出并实现的，后经过一步步繁衍生息，在es6中为我们提供了一个原生的构造函数prosime, promise是根据并遵循统一的promiseA+标准来实现的。

2.Promise的状态与使用

Promise 对象存在以下三种状态：

~Pending(进行中)

~Fulfilled(已成功)

~Rejected(已失败)

2.1 Promise的立即执行/异步

看下面的代码

    setTimeout(() => {
      console.log('start one setTimeout')
    }, 0)
    const first = new Promise((resolve, reject) => {
      console.log('create one promise')
      const two = new Promise((resolve, reject) => {
        console.log('create two promise')
        setTimeout(() => {
          console.log('start two setTimeout')
        }, 0)
        resolve('two p2')
      })
      resolve('two p1')
      two.then((p2) => {
        console.log(p2)
      })
    })

    first.then(p1 => {
      console.log(p1)
    })
    console.log('after new Promise')
复制代码

Promise对象表示未来某个将要发生的事件，但在创建（new）Promise时，作为Promise参数传入的函数是会被立即执行的，即Promise的立即执行.

打印结果为 create one promise,create two promise,after new Promise,two p2,two p1,start one setTimeout,start two setTimeout

此处涉及到具体的js执行机制问题请移步 js执行机制

进行了两次事件循环，在最上部增加了一个setimeout为了更直观的表示队列问题，第一次事件循环先执行宏任务，发现第一个setimeout注册回调函数后放入Event Queque(下一轮任务队列),接着newpromise立即执行，输出 create one promise,接着执行 two 的newpromise 输出 create two promise, ，two的then放放入微任务队列，发现first的then，放入微任务队列(promise异步)。代码接着向下执行，输出after new Promise,宏任务执行结束。

此处的微队列的理解需要借助一部分promise的实现原理，promise对于then的回调做了渐进式兼容处理，常规状态下运用了Mutation​Observer.observe()（）这个回调监听，进入微服务，如果采用setimout进行promise回调的话，then回调惠方式下一轮任务队列的。

再执行微任务，依次 two的then回调输出wo p2，再执行frist的then回调输出wo p1。第一轮事件循环结束。开始执行第二轮事件循环执行setimeOut按照在队列中的注册顺序依次输出start one setTimeout,start two setTimeout。

再来一个小例子。

 setTimeout(function() {
      console.log('1')
    }, 0)
    var p1 = new Promise(function(resolve, reject) {
      console.log('2')
      resolve(3)
    })
    setTimeout(function() {
      console.log('4')
    }, 0)
    p1.then(function(value) {
      console.log(value)
    })
    setTimeout(function() {
      console.log('5')
    }, 0)
复制代码

打印结果为 2,3,1,4,5

2.2 promise 的不可逆性

还是上面的代码我们做一点点小小的更改，在看输出结果。

setTimeout(() => {
      console.log('start one setTimeout')
    }, 0)
    const first = new Promise((resolve, reject) => {
      console.log('create one promise')
      const two = new Promise((resolve, reject) => {
        console.log('create two promise')
        setTimeout(() => {
          resolve('two p3')
          console.log('start two setTimeout')
        }, 0)
        resolve('two p2')
      })
      resolve('two p1')
      two.then((p2) => {
        console.log(p2)
      })
    })
    first.then(p1 => {
      console.log(p1)
    })
    console.log('after new Promise')
复制代码

打印结果你会发现two p3并没有打印出来，因为在执行setimeout之前two这个promise的状态已经由pedding变更了，延时回调执行的时候resolve已经不能改变他的状态了。

promise状态只能由 Pending 变为 Fulfilled 或由 Pending 变为 Rejected ，且状态改变之后不会在发生变化，会一直保持这个状态。

3.promise与new promise 之resolve与reject

const first = Promise.resolve(1)
const second = Promise.resolve(first)
console.log(first === second)
复制代码

Promise打印输出为true.Promise.resolve(…)可以接收一个值或者是一个Promise对象作为参数。当参数是普通值时，它返回一个resolved状态的新的Promise对象，对象的值就是这个参数；当参数是一个Promise对象时，它直接返回这个Promise参数,对象的值就是接受的promise的参数。因此，p1 === p2。

–插一段Promise的实现原理—

Promise.resolve = function (value) {
    if (value instanceof Promise) {
        return value;
    }
    return new MyPromise(function (resolve, reject) {
        if (typeof value !== null && typeof value === 'object' && typeof value.then === 'function') {
            value.then();
        } else {
            resolve(value);
        }
    })
};
复制代码

从上可以看出当Promise.resolve执行的时候，会先判断传入的值，是否为promise的事例

const first = Promise.resolve(1)
 const second = new Promise(function(resolve, reject) {
  resolve(1)
 })
console.log(first === second)
复制代码

输出 false，因为通过new方式创建的promise是一个新的对象

var p1 = Promise.resolve( 1 );
var p2 = Promise.resolve( p1 );
var p4 = new Promise(function(resolve, reject){
  resolve(p1);
});

p4.then(function(value){
  console.log('p4=' + value);
});

p2.then(function(value){
  console.log('p2=' + value);
})

p1.then(function(value){
  console.log('p1=' + value);
})

复制代码

控制台输出：

p2=1 p1=1 p4=1 Promise回调函数中的第一个参数resolve，会对Promise执行”拆箱”动作。即当resolve的参数是一个Promise对象时，resolve会”拆箱”获取这个Promise对象的状态和值，但这个过程是异步的。p4″拆箱”后，才会输出，所以p4的then最先调用，但在控制台上确实最后输出的。

参考借例 一个Promise面试题 —-八段代码掌握promise