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

转载于:https://juejin.im/post/5cbebda2f265da039955dd42

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值