手写一个简单的promise

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 603 阅读

CC 4.0 BY-SA版权

文章标签：

// 1. promise三种状态pending fufilled rejected
// 2. promise只能将pending变成fufilled或者pending变成rejected, 状态一但确定无法改变
// 3. promise fufilled执行then中的第一个函数, promise rejected执行then中的第二个函数
// 4. promise有后续处理(then)
// 5. then所对应的promise有三种情况
// (1) 没有对应的后续处理即then中没有对应状态的后续处理回调函数, 则then所对应的promise就吸收之前的promise的状态
// (2) 若后续处理没有执行, 则then所对应的promise处于挂起状态
// (3) 有后续处理
// a 后续处理没有错误, 则返回成功的promise, 值为return的值
// b 后续处理中有错, 则返回失败的promise, 值为失败的原因
// c 后续处理中返回的是一个promise, 则外部的promise吸收return返回的promise的状态

function isPromise(obj) {
return !!(obj && obj.then && typeof obj.then == ‘function’)
}

updateStatus(status, value) {
// 状态一但确定无法改变
if (this.status != pending) return;

 this.status = status;

 this._value = value;

}

// 将状态改成fufilled
resolve(result) {
this.updateStatus(fufilled, result);
}

// 将状态改成rejected
rejected(reason) {
this.updateStatus(rejected, reason);
}

// then函数返回一个promise, 返回的promise的状态需要根据then方法回调函数的执行结果来处理
// 1.在状态改变时(调用reslve或者rejected)或者then方法执行时收集起来所有的函数
// 调用异步resolve或者rejected, 此时回调函数已经全部收集, 开启微任务,执行函数
// 调用同步resolve或者rejected, 此时回调函数还没有收集, 也开启微任务,执行函数
// 2.then方法主要就是用来收集fufilledDispose, rejectedDispose, resolve和reject, 保存到一个数组中等到resolve或者
// reject时, 再将数组的执行过程放在微任务里面执行
then(fufilledDispose, rejectedDispose) {
return new MyPromise((resolve, rejected) => {
this.callbacks.push({ status: fufilled, cb: fufilledDispose, resolve, rejected });
this.callbacks.push({ status: ‘REJECTED’, cb: rejectedDispose, resolve, rejected });
// this.execCallbacks();
queueMicrotask(this.execCallbacks.bind(this))
})

}

// 所有then中的回调函数执行
execCallbacks() {

// 如果当前的promise状态是pending, 则终止promise的then的回调函数的处理
if (this.status == pending) return;
// 每次执行完毕之后都需要将当前的对象从callbacks里面删除 原因在于之后还有可能继续调用then,
// 而所有的的回调函数保存在callback里面不删除的话就会导致之后then方法返回的promise的状态有问题
// realExecFns.forEach(({ cb, resolve, rejected }) => {
//   const resullt = cb();
//   resolve(resullt)
// })
while (this.callbacks.length) {
  const { cb, resolve, rejected, status } = this.callbacks[0];
  // realExecFns.splice(0, 1);
  try {
    this.callbacks.splice(0, 1);
    if (status != this.status) {
      continue;
    }
    if (typeof cb != 'function') {
      // 不是函数则当前then返回的promise吸收promise的状态
      if (this.status == fufilled) {
        resolve(this._value);
      } else {
        rejected(this._value);
      }
      continue;
    }

    const result = cb(this._value);
    if (isPromise(result)) {
      // 如果返回的结果是一个promise, 则then返回的promise吸收内部回调函数返回的promise的状态
      // v8源码内部会将result.then(resolve, rejected);也将其包装成一个微任务进行执行
      result.then(resolve, rejected);
      continue;
    }
    resolve(result);
  } catch (error) {
    rejected(error)
  }
}

}