优秀的编程知识分享平台

网站首页 > 技术文章 正文

JavaScript基础:实现一个简单版Promise对象,探究内部实现原理

nanyue 2024-09-03 16:39:11 技术文章 6 ℃

先来搭建构建函数的大体框架

  1. 首先我们创建了三个常量用于表示状态,对于经常使用的一些值都应该通过常量来管理,便于开发及后期维护
  2. 在函数体内部首先创建了常量 that,因为代码可能会异步执行,用于获取正确的 this 对象
  3. 一开始 Promise 的状态应该是 pending
  4. value 变量用于保存 resolve 或者 reject 中传入的值
  5. resolvedCallbacks 和 rejectedCallbacks 用于保存 then 中的回调,因为当执行完 Promise 时状态可能还是等待中,这时候应该把 then 中的回调保存起来用于状态改变时使用

接下来完善 resolve 和 reject 函数,添加在 MyPromise 函数体内部

这两个函数代码类似,就一起解析了

  1. 首先两个函数都得判断当前状态是否为等待中,因为规范规定只有等待态才可以改变状态
  2. 将当前状态更改为对应状态,并且将传入的值赋值给 value
  3. 遍历回调数组并执行

完成以上两个函数以后,我们就该实现如何执行 Promise 中传入的函数了

  1. 实现很简单,执行传入的参数并且将之前两个函数当做参数传进去
  2. 要注意的是,可能执行函数过程中会遇到错误,需要捕获错误并且执行 reject 函数

最后实现较为复杂的 then 函数

  1. 首先判断两个参数是否为函数类型,因为这两个参数是可选参数
  2. 当参数不是函数类型时,需要创建一个函数赋值给对应的参数,同时也实现了链式,比如如下代码
// 该代码目前在简单版中会报错
// 只是作为一个透传的例子
Promise.resolve(4).then().then((value) => console.log(value))
  • 接下来就是一系列判断状态的逻辑,当状态不是等待态时,就去执行相对应的函数。如果状态是等待态的话,就往回调函数中 push 函数,比如如下代码就会进入等待态的逻辑

以上就是简单版 Promise 实现。

Tags:

最近发表
标签列表