promise专题04-自定义promise之then方法执行回调、异步的执行逻辑、指定多个回调，同步及异步修改状态then方法改变结果，then方法的完善有优化，catch方法异常穿透与值传递-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43745804/article/details/120775439

这篇博客深入解析了Promise的实现细节，包括then方法中如何根据PromiseState的状态执行回调函数，处理异步场景下的逻辑，以及如何处理多个回调和同步修改状态。文章还探讨了then方法在处理返回Promise对象时的逻辑，并介绍了catch方法如何进行异常穿透和值传递，确保错误处理的顺畅性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

7、then方法执行回调

then方法里的两个形参实际对应着两个参数（函数），并且自己也带参（存储在PromiseResult里），因此要实现onResolved和onRejected两个函数的逻辑
这里要判断PromiseState的状态，因为在resolve或reject的时候，已经实现修改了PromiseState的值（resolvue和reject隐含的第一项操作就是修改PromiseState的值，第二不就是修改PromiseResult的值）

//相当于重写promise
function Promise(excutor){
   
   
  //添加属性
  this.PromiseState='pending'
  this.PromiseResult=''
  const that=this
  //同步调用执行器函数
  function resolve (data) {
   
   
    if (that.PromiseState!=='pending'){
   
   
      return
    }
    //修改对象的状态。promiseState
    that.PromiseState='fulfilled'
    //设置对象结果值promiseReuslt
     that.PromiseResult=data
  }
  function reject (data) {
   
   
    if (that.PromiseState!=='pending'){
   
   
      return
    }
    that.PromiseState='rejected'
    that.PromiseResult=data
  }
  //这里要执行这个执行器函数
  try{
   
   
    excutor(resolve,reject)
  }
  catch (e) {
   
   
    reject(e)//
  }


}

Promise.prototype.then=function(onResolved,onRejected){
   
   
  //调用回到函数，需要做对this.PromiseState做条件判断
  if (this.PromiseState=='fulfilled'){
   
   
    onResolved(this.PromiseResult)
  }
  if (this.PromiseState=='rejected'){
   
   
    onRejected(this.PromiseResult)
  }
}

8、异步的执行逻辑

要处理处理异步调用，异步的时候，then先被执行，因此，此刻的PromiseState的状态是‘pending’，因此要在then方法中有响应的对‘pending’状态的处理逻辑
由于异步状态下，then方法先执行，然后PromiseState才被改变，因此，当遇到PromiseState的值为‘pending’的时候，应当先保存onResolved和onRejected带到PromiseState发生改变的时候再去执行
由于the的作用域和执行器函数的作用域不一致，因此要在Promise的类属性中保存一个callback属性（用json格式）。
最后在生成器函数中去执行这个callback属性包含的onResolved和onRejected方法

//相当于重写promise
function Promise(excutor){
   
   
  //添加属性
  this.PromiseState='pending'
  this.PromiseResult=''

  //在这里保存一个callback属性用来存放onResolved和onRejected方法
  this.callback={
   
   }
  const that=this


  //同步调用执行器函数
  function resolve (data) {
   
   
    if (that.PromiseState!=='pending'){
   
   
      return
    }
    //修改对象的状态。promiseState
    that.PromiseState='fulfilled'
    //设置对象结果值promiseReuslt
     that.PromiseResult=data
    //异步状态下执行成功的回调函数（这里有点回归的意思）
    if (that.callback.onResolved){
   
   //如果
      that.callback.onResolved(data)
    }
  }
  function reject (data) {
   
   
    if (that.PromiseState!=='pending'){
   
   
      return
    }
    that.PromiseState='rejected'
    that.PromiseResult=data
    //异步状态下执行失败的回调函数
    if (that.callback.onRejected){
   
   //如果
      that.callback.onRejected(data)
    }
  }
  //这里要执行这个执行器函数
  try{
   
   
    excutor(resolve,reject)
  }
  catch (e) {
   
   
    reject(e)//
  }


}

Promise.prototype.then=function(onResolved,onRejected){
   
   
  //调用回到函数，需要做对this.PromiseState做条件判断
  if (this.PromiseState=='fulfilled'){
   
   
    onResolved(this.PromiseResult)
  }
  if (this.PromiseState=='rejected'){
   
   
    onRejected(this.PromiseResult)
  }
  //异步状态下这里先执行
  if (this.PromiseState=='pending'){
   
   
    //把两个函数存储到callback属性上去
    this.callback={
   
   
      onResolved,
      onRejected
    }
  }
}

在这里插入图片描述

9、指定多个回调

如果有多个回调的情形，then的多个成功的resolve都可以执行
但多个then每次都会将callback属性保存并覆盖之前的信息，导致只能执行最后一个onResolved或onRejected，因此要将callback作为一个数组来保存
每次then执行的时候将then所在的onResolved或onRejected方法push到数组中去
使用时，按顺序遍历数组中的事件回调函数，这样就做到了依次执行

//相当于重写promise
function Promise(excutor){
   
   
  //添加属性
  this.PromiseState='pending'
  this.PromiseResult=''

  //在这里保存一个callback属性用来存放onResolved和onRejected方法
  this.callbacks=[]
  const that=this


  //同步调用执行器函数
  function resolve (data