Promise实现原理(附源码)

javascript admin 2400 0 评论

本篇文章主要在于探究 Promise 的实现原理,带领大家一步一步实现一个 Promise , 不对其用法做说明,如果读者还对Promise的用法不了解,可以查看阮一峰老师的ES6 Promise教程

接下来,带你一步一步实现一个 Promise

1. Promise 基本结构

构造函数Promise必须接受一个函数作为参数,我们称该函数为handlehandle又包含resolvereject两个参数,它们是两个函数。

定义一个判断一个变量是否为函数的方法,后面会用到

首先,我们定义一个名为 MyPromiseClass,它接受一个函数 handle 作为参数

再往下看

2. Promise 状态和值

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

  • Pending(进行中)
  • Fulfilled(已成功)
  • Rejected(已失败)

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

Promise的值是指状态改变时传递给回调函数的值

上文中handle函数包含 resolvereject 两个参数,它们是两个函数,可以用于改变 Promise 的状态和传入 Promise 的值

这里 resolve 传入的 "FULFILLED" 就是 Promise 的值

resolvereject

  • resolve : 将Promise对象的状态从 Pending(进行中) 变为 Fulfilled(已成功)
  • reject : 将Promise对象的状态从 Pending(进行中) 变为 Rejected(已失败)
  • resolvereject 都可以传入任意类型的值作为实参,表示 Promise 对象成功(Fulfilled)和失败(Rejected)的值

了解了 Promise 的状态和值,接下来,我们为 MyPromise 添加状态属性和值

首先定义三个常量,用于标记Promise对象的三种状态

再为 MyPromise 添加状态和值,并添加状态改变的执行逻辑

这样就实现了 Promise 状态和值的改变。下面说一说 Promise 的核心: then 方法

3. Promisethen 方法

Promise 对象的 then 方法接受两个参数:

参数可选

onFulfilledonRejected 都是可选参数。

  • 如果 onFulfilledonRejected 不是函数,其必须被忽略

onFulfilled 特性

如果 onFulfilled 是函数:

  • promise 状态变为成功时必须被调用,其第一个参数为 promise 成功状态传入的值( resolve 执行时传入的值)
  • promise 状态改变前其不可被调用
  • 其调用次数不可超过一次

onRejected 特性

如果 onRejected 是函数:

  • promise 状态变为失败时必须被调用,其第一个参数为 promise 失败状态传入的值( reject 执行时传入的值)
  • promise 状态改变前其不可被调用
  • 其调用次数不可超过一次

多次调用

then 方法可以被同一个 promise 对象调用多次

  • promise 成功状态时,所有 onFulfilled 需按照其注册顺序依次回调
  • promise 失败状态时,所有 onRejected 需按照其注册顺序依次回调

返回

then 方法必须返回一个新的 promise 对象

因此 promise 支持链式调用

这里涉及到 Promise 的执行规则,包括“值的传递”和“错误捕获”机制:

1、如果 onFulfilled 或者 onRejected 返回一个值 x ,则运行下面的 Promise 解决过程:[[Resolve]](promise2, x)

  • x 不为 Promise ,则使 x 直接作为新返回的 Promise 对象的值, 即新的onFulfilled 或者 onRejected 函数的参数.
  • xPromise ,这时后一个回调函数,就会等待该 Promise 对象(即 x )的状态发生变化,才会被调用,并且新的 Promise 状态和 x 的状态相同。

下面的例子用于帮助理解:

2、如果 onFulfilled 或者onRejected 抛出一个异常 e ,则 promise2 必须变为失败(Rejected),并返回失败的值 e,例如:

3、如果onFulfilled 不是函数且 promise1 状态为成功(Fulfilled)promise2 必须变为成功(Fulfilled)并返回 promise1 成功的值,例如:

4、如果 onRejected 不是函数且 promise1 状态为失败(Rejected)promise2必须变为失败(Rejected) 并返回 promise1 失败的值,例如:

根据上面的规则,我们来为 完善 MyPromise

修改 constructor : 增加执行队列

由于 then 方法支持多次调用,我们可以维护两个数组,将每次 then 方法注册时的回调函数添加到数组中,等待执行

添加then方法

首先,then 返回一个新的 Promise 对象,并且需要将回调函数加入到执行队列中

那返回的新的 Promise 对象什么时候改变状态?改变为哪种状态呢?

根据上文中 then 方法的规则,我们知道返回的新的 Promise 对象的状态依赖于当前 then 方法回调函数执行的情况以及返回值,例如 then 的参数是否为一个函数、回调函数执行是否出错、返回值是否为 Promise 对象。

我们来进一步完善 then 方法:

这一部分可能不太好理解,读者需要结合上文中 then 方法的规则来细细的分析。

接着修改 _resolve_reject :依次执行队列中的函数

resolvereject 方法执行时,我们依次提取成功或失败任务队列当中的函数开始执行,并清空队列,从而实现 then 方法的多次调用,实现的代码如下:

这里还有一种特殊的情况,就是当 resolve 方法传入的参数为一个 Promise 对象时,则该 Promise 对象状态决定当前 Promise 对象的状态。

上面代码中,p1p2 都是 Promise 的实例,但是 p2resolve方法将 p1 作为参数,即一个异步操作的结果是返回另一个异步操作。

注意,这时 p1 的状态就会传递给 p2,也就是说,p1 的状态决定了 p2 的状态。如果 p1 的状态是Pending,那么 p2 的回调函数就会等待 p1 的状态改变;如果 p1 的状态已经是 Fulfilled 或者 Rejected,那么 p2 的回调函数将会立刻执行。

我们来修改_resolve来支持这样的特性

这样一个Promise就基本实现了,现在我们来加一些其它的方法

catch 方法

相当于调用 then 方法, 但只传入 Rejected 状态的回调函数

静态 resolve 方法

静态 reject 方法

静态 all 方法

静态 race 方法

finally 方法

finally 方法用于指定不管 Promise 对象最后状态如何,都会执行的操作

这样一个完整的 Promsie 就实现了,大家对 Promise 的原理也有了解,可以让我们在使用Promise的时候更加清晰明了。

完整代码如下

如果觉得还行的话,点个赞、收藏一下再走吧。

转载请注明: 飞嗨_分享互联网 » Promise实现原理(附源码)

赞 (0) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽

高效,专业,符合SEO

联系我们