深入浅出Promise

之前说过买了本小册，在小册的讨论组中有人提出了new Promise的RESOLVE和Promise.resolve会有不同的执行效果。一时不明白，后在stackoverflow上搜到了相关问题。举例:

1
2
3
4
5
6
7
8
9
10
const p = new Promise(resolve => resolve('author is maczyt'));

new Promise(resolve => {
  resolve(p)
}).then(() => {
  console.log(1);
});
Promise.resolve(p).then(() => {
  console.log(2);
});

一开始我按照微任务的添加顺序得到答案应该是 1、2, 但通过执行得到的答案是 2、1

但是让我们看看下面的例子:

1
2
3
4
5
6
7
8
9
10
const p = 'author is maczyt'; // p不是promise对象

new Promise(resolve => {
  resolve(p)
}).then(() => {
  console.log(1);
});
Promise.resolve(p).then(() => {
  console.log(2);
});

大家猜猜这个输出顺序又是什么? // 答案为: 1、2
可以看出这个是按照微任务的执行顺序执行的。

为何执行效果会刚好相反呢? 作为志向进入某爸爸公司的我，当然得知其然而知其所以然。😁

大家请往下看。

既然我们想知道Promise的执行机制，那么就让我们来实现一个Promise。

我们将遵循Promise/A+规范。

Promise/A+规范

我想规范就是统一各种JS引擎如何实现Promise，以免需要针对不同JS引擎(比如我们曾经因为兼容IE所作出的巨大努力)

Promise的状态

  1. 等待态(pending)
    • 可以转成执行态或拒绝态
  2. 执行态(resolved)
    • 不能转成其他状态
    • value为不可变的终值
  3. 拒绝态
    • 不能转成其他状态
    • value为不可变的据因

then

1
promise.then(onFulfilled, onRejected)

参数

  • onFulfilled不为函数，则被忽略
  • onRejected不为函数，则被忽略

返回值

  1. 如果onFulfilled或onRejected抛出异常e，则返回new Promise((resolve, reject) => reject(e))
  2. 如果写了return x则返回new Promise((resolve) => resolve(x))，否则x为undefined

具体实现

类实现

1
2
3
4
5
class Promise {
  constructor() {
    
  }
}

具体实现代码待补充

推荐文章