手写 Promise 源码之核心逻辑实现

目录

• 手写 Promise 源码之核心逻辑实现
  • 需求分析
  • 核心逻辑代码
  • 测试

手写 Promise 源码之核心逻辑实现

需求分析

1. Promise 就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行
2. Promise 中有三种状态，分别为：成功 fullilled 失败 rejected 等待 pending
   pengding -> fulfilled
   pengding -> rejected
   一旦状态确定就不可更改
3. resove 和 reject 函数是用来更改状态的
   resolve: fulfilled
   reject: rejected
4. then 方法内部做的事情就是判断状态，如果状态是成功，调用成功的回调函数，如果状态是失败，调用失败回调函数，then 方法是被定义在原型对象中的
5. then 成功回调有一个参数，表示成功之后的值，then 失败回调有一个参数，表示失败后的原因

核心逻辑代码

// myPromise.js
const PENDING = 'pengding' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' /// 失败

class MyPromise {
  constructor(exectuor) {
    exectuor(this.resolve, this.reject)
  }

  // promise 状态
  status = PENDING

  // 成功之后的值
  value = undefined

  // 失败之后的原因
  reason = undefined

  //  此处的箭头函数是为了使 this 指向该函数的实例对象
  resolve = value => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return
    // 将状态更改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
  }

  reject = reason => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return
    // 将状态更改为失败
    this.status = REJECTED
    // 保存失败后的原因
    this.reason = reason
  }

  then(successCallback, failCallback) {
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      failCallback(this.reason)
    }
  }
}

// node 环境下导出
module.exports = MyPromise

测试

// index.js
const MyPromise = require('./myPromise.js')

let promise = new MyPromise((resolve, reject) => {
  resolve('成功')
  // reject('失败')
})

promise.then(value => {
  console.log(value)
}, reason => {
  console.log(reason)
})