你不容错过的JavaScript高级语法(再次手写Promise)

640

以前学习过手写Promise，但是只是在看懂的基础上加以”抄袭”代码。所以，下面一篇文章将总结老师的手写思想，然后记录一下。

promise基础用法如果不熟悉的同学，请访问这里promise用法。

手写之前我们需要知道的事情

  • promise初始状态为pending。
  • 当调用resolve时，状态变为fulfilled。
  • 当调用reject是，状态变为rejected。
  • 只要状态从pending改变后，该状态将一直保持不变。
  • 抛出错误后，它将调用reject。状态变为rejected。

根据上面的规则，我们可以给出以下结构

  • 定义三个状态常量。
  • 定义成功传递的值。
  • 定义失败的原因。
    const PROMISE_STATUS_PENDING = 'pending'
    const PROMISE_STATUS_FULFILLED = 'fulfilled'
    const PROMISE_STATUS_REJECTED = 'rejected'

    class MyPromise {
      constructor(executor) {
        this.status = PROMISE_STATUS_PENDING
        this.value = undefined
        this.reason = undefined

        const resolve = (value) => {
          // 只有状态为pedding时，他才会赋值value，并且改变状态。
          if (this.status === PROMISE_STATUS_PENDING) {
            this.status = PROMISE_STATUS_FULFILLED
            this.value = value
            console.log("resolve被调用")
          }
        }

        const reject = (reason) => {
          if (this.status === PROMISE_STATUS_PENDING) {
            this.status = PROMISE_STATUS_REJECTED
            this.reason = reason
            console.log("reject被调用")
          }
        }
        // 立即执行执行器，即传入promise的函数。当执行器抛出错误，直接调用reject传递错误。
         try {
           executor(resolve, reject)
         } catch (error) {
           reject(error)
         }
      }
    }
复制代码

测试

    
const promise = new MyPromise((resolve, reject) => {
  console.log("状态pending")
  resolve(1111)
  reject(2222)
})
复制代码

image.png
由上面的输出可以知道，当调用resolve时，promise状态改变，即使调用了reject了，也不会再去执行。

then方法的设计

  • then方法可以接受两个参数。
  • 我们将该参数保留下来，当调用resolve或者reject时，将其加入微任务中，这样就满足了原生Promise调用then方法，将其加入微任务队列的效果。

版本一

    const PROMISE_STATUS_PENDING = 'pending'
    const PROMISE_STATUS_FULFILLED = 'fulfilled'
    const PROMISE_STATUS_REJECTED = 'rejected'

    class MyPromise {
      constructor(executor) {
        this.status = PROMISE_STATUS_PENDING
        this.value = undefined
        this.reason = undefined

        const resolve = (value) => {
          if (this.status === PROMISE_STATUS_PENDING) {
            this.status = PROMISE_STATUS_FULFILLED
            // 将其将入微任务队列中
            queueMicrotask(() => {
              this.value = value
              this.onFulfilled(this.value)
            });
          }
        }

        const reject = (reason) => {
          if (this.status === PROMISE_STATUS_PENDING) {
            this.status = PROMISE_STATUS_REJECTED
            queueMicrotask(() => {
              this.reason = reason
              this.onRejected(this.reason)
            })
          }
        }

        try {
          executor(resolve, reject)
        } catch (error) {
          reject(error)
        }
      }

      then(onFulfilled, onRejected) {
        this.onFulfilled = onFulfilled
        this.onRejected = onRejected
      }
    }
复制代码

测试一

    const promise = new MyPromise((resolve, reject) => {
      console.log("状态pending")
      reject(2222)
      resolve(1111)
    })

    // 调用then方法
    promise.then(res => {
      console.log("res1:", res)
      return 1111
    }, err => {
      console.log("err:", err)
    })

    promise.then(res => {
      console.log("res2:", res)
    }, err => {
      console.log("err2:", err)
    })
复制代码

image.png
由上面的结果可知，当多次调用同一个promise时，他不会多次执行then方法，因为他会覆盖上一次的onFulfilled, onRejected方法，所以只会执行一次。

测试二

    // 异步调用then方法
    setTimeout(() => {
      promise.then(res => {
        console.log("res", res)
      })
    }, 1000);
复制代码

image.png
由上面的结果可知，方promise执行完后，才回去执行setTimeout,所以还没有加入到onFulfilled，所以onFulfilled为undefined。

版本二

针对上面的问题，我们可以做出优化

  • 定义onFulfilledFns，onRejectedFns两个数组，分别收集then方法对应的两个参数。
  • 将then方法传递的参数，放在对应的数组中。
  • 当我们将then方法异步调用时，那时promise的状态已经被确定下来，所以，我们需要将then中方法直接调用。
  • 如果改变状态的语句放在微任务内的话，那么非异步调用then也会直接在then方法中执行，如果改变状态的语句放在微任务外部的话，那么调用reject和resolve都会执行。所以就需要给出一个判断if (this.status !== PROMISE_STATUS_PENDING) return, 这样当resolve的微任务执行的时候状态就会改变，再次执行reject的微任务时，就直接return, 反之也是一样。
    const PROMISE_STATUS_PENDING = 'pending'
    const PROMISE_STATUS_FULFILLED = 'fulfilled'
    const PROMISE_STATUS_REJECTED = 'rejected'

    class MyPromise {
      constructor(executor) {
        this.status = PROMISE_STATUS_PENDING
        this.value = undefined
        this.reason = undefined
        this.onFulfilledFns = []
        this.onRejectedFns = []

        const resolve = (value) => {
          if (this.status === PROMISE_STATUS_PENDING) {
            // 添加微任务
            queueMicrotask(() => {
              // 如果状态改变，那么将不会再次改变状态，直接在then方法就调用了传递的参数。
              if (this.status !== PROMISE_STATUS_PENDING) return
              this.status = PROMISE_STATUS_FULFILLED
              this.value = value
              this.onFulfilledFns.forEach(fn => {
                fn(this.value)
              })
            });
          }
        }

        const reject = (reason) => {
          if (this.status === PROMISE_STATUS_PENDING) {
            // 添加微任务
            queueMicrotask(() => {
              if (this.status !== PROMISE_STATUS_PENDING) return
              this.status = PROMISE_STATUS_REJECTED
              this.reason = reason
              this.onRejectedFns.forEach(fn => {
                fn(this.reason)
              })
            })
          }
        }

        executor(resolve, reject)
      }

      then(onFulfilled, onRejected) {
        // 如果在then调用的时候, 状态已经确定下来,为了满足异步调用then方法
        if (this.status === PROMISE_STATUS_FULFILLED && onFulfilled) {
          onFulfilled(this.value)
        }
        if (this.status === PROMISE_STATUS_REJECTED && onRejected) {
          onRejected(this.reason)
        }

        // 将成功回调和失败的回调放到数组中
        if (this.status === PROMISE_STATUS_PENDING) {
          this.onFulfilledFns.push(onFulfilled)
          this.onRejectedFns.push(onRejected)
        }
      }
    }
复制代码

测试三

    const promise = new MyPromise((resolve, reject) => {
      console.log("状态pending")
      resolve(1111) // resolved/fulfilled
      reject(2222)
    })

    // 调用then方法多次调用
    promise.then(res => {
      console.log("res1:", res)
    }, err => {
      console.log("err:", err)
    })

    promise.then(res => {
      console.log("res2:", res)
    }, err => {
      console.log("err2:", err)
    })

    // 在确定Promise状态之后, 再次调用then
    setTimeout(() => {
      promise.then(res => {
        console.log("res3:", res)
      }, err => {
        console.log("err3:", err)
      })
    }, 1000)
复制代码

image.png
上面版本存在的问题是不能链式调用。

版本三

  • then方法直接返回promise。
  • 只有当then中的方法抛出异常的时候，他才会调用reject。否则都将调用resolve。
    function execFunctionWithCatchError(execFn, value, resolve, reject) {
      try {
        const result = execFn(value)
        resolve(result)
      } catch(err) {
        reject(err)
      }
    }
复制代码
    const PROMISE_STATUS_PENDING = 'pending'
    const PROMISE_STATUS_FULFILLED = 'fulfilled'
    const PROMISE_STATUS_REJECTED = 'rejected'

    // 工具函数
    function execFunctionWithCatchError(execFn, value, resolve, reject) {
      try {
        const result = execFn(value)
        resolve(result)
      } catch(err) {
        reject(err)
      }
    }

    class MyPromise {
      constructor(executor) {
        this.status = PROMISE_STATUS_PENDING
        this.value = undefined
        this.reason = undefined
        this.onFulfilledFns = []
        this.onRejectedFns = []

        const resolve = (value) => {
          if (this.status === PROMISE_STATUS_PENDING) {
            // 添加微任务
            queueMicrotask(() => {
              if (this.status !== PROMISE_STATUS_PENDING) return
              this.status = PROMISE_STATUS_FULFILLED
              this.value = value
              this.onFulfilledFns.forEach(fn => {
                fn(this.value)
              })
            });
          }
        }

        const reject = (reason) => {
          if (this.status === PROMISE_STATUS_PENDING) {
            // 添加微任务
            queueMicrotask(() => {
              if (this.status !== PROMISE_STATUS_PENDING) return
              this.status = PROMISE_STATUS_REJECTED
              this.reason = reason
              this.onRejectedFns.forEach(fn => {
                fn(this.reason)
              })
            })
          }
        }

        try {
          executor(resolve, reject)
        } catch (err) {
          reject(err)
        }
      }

      then(onFulfilled, onRejected) {
        return new HYPromise((resolve, reject) => {
          // 如果在then调用的时候, 状态已经确定下来
          if (this.status === PROMISE_STATUS_FULFILLED && onFulfilled) {
            // try {
            //   const value = onFulfilled(this.value)
            //   resolve(value)
            // } catch(err) {
            //   reject(err)
            // }
            execFunctionWithCatchError(onFulfilled, this.value, resolve, reject)
          }
          if (this.status === PROMISE_STATUS_REJECTED && onRejected) {
            execFunctionWithCatchError(onRejected, this.reason, resolve, reject)
          }

          // 将成功回调和失败的回调放到数组中
          if (this.status === PROMISE_STATUS_PENDING) {
            // 这里是为了拿到返回的值所以再次封装一层函数
            this.onFulfilledFns.push(() => {
              execFunctionWithCatchError(onFulfilled, this.value, resolve, reject)
            })
            this.onRejectedFns.push(() => {
              execFunctionWithCatchError(onRejected, this.reason, resolve, reject)
            })
          }
        })
      }
    }
复制代码

测试四

    const promise = new MyPromise((resolve, reject) => {
      console.log("状态pending")
      resolve(1111) 
    })

    // 调用then方法多次调用
    promise.then(res => {
      console.log("res1:", res)
      return "aaaa"
    }, err => {
      console.log("err1:", err)
      return "bbbbb"
    }).then(res => {
      console.log("res2:", res)
    }, err => {
      console.log("err2:", err)
    })
复制代码

image.png
上面的then方法没有判断then方法返回值，只是返回普通的值。

catch方法的设计

  • 利用then方法链式调用，抛出异常时，直接调用下一个then方法的onRejected。
  • 直接定义一个默认的onRejected方法，抛出错误。
  • 直接调用then方法的第二个参数即可
  then(onFulfilled, onRejected) {
    // then方法新增
    + const defaultOnRejected = err => { throw err }
    + onRejected = onRejected || defaultOnRejected
  }
  catch(onRejected) {
    // 让其可以链式调用
    return this.then(undefined, onRejected)
  }
复制代码

测试

   const promise = new MyPromise((resolve, reject) => {
      console.log("状态pending")
      reject(2222)
    })

    // 调用then方法多次调用
    promise.then(res => {
      console.log("res:", res)
    }).catch(err => {
      console.log("err:", err)
    })
复制代码

image.png

finally方法的设计

  • 实现原理其实和catch差不多。
  • 就是使用then方法的链式调用，在下一个then方法中的参数中执行finally参数。
  then(onFulfilled, onRejected) {
    // then方法新增
    + const defaultOnFulfilled = value => { return value }
    + onFulfilled = onFulfilled || defaultOnFulfilled
  }
  finally(onFinally) {
    this.then(() => {
      onFinally()
    }, () => {
      onFinally()
    })
  }
复制代码

测试

    const promise = new MyPromise((resolve, reject) => {
      console.log("状态pending")
      resolve(1111)
    })

    // 调用then方法多次调用
    promise.then(res => {
      console.log("res1:", res)
      return "aaaaa"
    }).then(res => {
      console.log("res2:", res)
    }).catch(err => {
      console.log("err:", err)
    }).finally(() => {
      console.log("finally")
    })
复制代码

image.png

resolve, reject方法设计

  • 直接调用Promise即可。然后再调用相应的resolve, reject方法。
  static resolve(value) {
    return new MyPromise((resolve) => resolve(value))
  }

  static reject(reason) {
    return new MyPromise((resolve, reject) => reject(reason))
  }
复制代码

测试

    MyPromise.resolve("success=========").then(res => {
      console.log("res:", res)
    })

    MyPromise.reject("error========").catch(err => {
      console.log("err:", err)
    })
复制代码

image.png

all方法的设计

  • 实现了上面的方法，对于all方法的实现就很容易了。主要弄清楚all方法的使用即可。
  • 当传入的promises数组中全部promise状态都为fulfilled时，才会去调用Promise的resolve,并将其promises的结果放在数组中返回。
  • 当传入的promises数组中有一个promise状态变为rejected时，就调用Promise的reject。
  static all(promises) {
    return new MyPromise((resolve, reject) => {
      const values = []
      promises.forEach(promise => {
        promise.then(res => {
          values.push(res)
          if (values.length === promises.length) {
            resolve(values)
          }
        }, err => {
          reject(err)
        })
      })
    })
  }
复制代码

测试

    const p1 = new MyPromise((resolve) => {
      setTimeout(() => { resolve(1111) }, 1000)
    })
    const p2 = new MyPromise((resolve, reject) => {
      setTimeout(() => { reject(2222) }, 2000)
    })
    const p3 = new MyPromise((resolve) => {
      setTimeout(() => { resolve(3333) }, 3000)
    })
    MyPromise.all([p1, p2, p3]).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
复制代码

image.png

allSettled方法的设计

  • 这个方法主要是弥补all的缺陷的。
  • 不管传入的promises中的promise状态变成什么，他都会放入数组，然后等到所有状态都改变后，调用Promise的resolve方法。
  • 注意：他将传递该promise的状态和值。
  static allSettled(promises) {
    return new MyPromise((resolve) => {
      const results = []
      promises.forEach(promise => {
        promise.then(res => {
          results.push({ status: PROMISE_STATUS_FULFILLED, value: res})
          if (results.length === promises.length) {
            resolve(results)
          }
        }, err => {
          results.push({ status: PROMISE_STATUS_REJECTED, value: err})
          if (results.length === promises.length) {
            resolve(results)
          }
        })
      })
    })
  }
复制代码

测试

 const p1 = new MyPromise((resolve) => {
      setTimeout(() => { resolve(1111) }, 1000)
    })
    const p2 = new MyPromise((resolve, reject) => {
      setTimeout(() => { reject(2222) }, 2000)
    })
    const p3 = new MyPromise((resolve) => {
      setTimeout(() => { resolve(3333) }, 3000)
    })
    MyPromise.allSettled([p1, p2, p3]).then(res => {
      console.log(res)
    })
复制代码

image.png

race方法的设计

  • 这个方法主要是测试哪一个promise的状态先变化，就决定Promise的状态。
  static race(promises) {
    return new HYPromise((resolve, reject) => {
      promises.forEach(promise => {
        // promise.then(res => {
        //   resolve(res)
        // }, err => {
        //   reject(err)
        // })
        promise.then(resolve, reject)
      })
    })
  } 
复制代码

测试

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => { reject(1111) }, 3000)
})
const p2 = new MyPromise((resolve, reject) => {
  setTimeout(() => { reject(2222) }, 2000)
})
const p3 = new MyPromise((resolve, reject) => {
  setTimeout(() => { reject(3333) }, 3000)
})


MyPromise.race([p1, p2, p3]).then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
})
复制代码

image.png

any方法的设计

  • any方法会等到一个fulfilled状态，才会决定新Promise的状态。 如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejected状态。

  • 如果所有的Promise都是reject的，那么会报一个AggregateError的错误。 image.png 通过err.errors可以拿到全部的reject时传递的参数。

  • 其实就是allSettled相反的思想。

  static any(promises) {
    const reasons = []
    return new HYPromise((resolve, reject) => {
      promises.forEach(promise => {
        promise.then(resolve, err => {
          reasons.push(err)
          if (reasons.length === promises.length) {
            reject(new AggregateError(reasons))
          }
        })
      })
    })
  }
复制代码

测试

    MyPromise.any([p1, p2, p3]).then(res => {
      console.log("res:", res)
    }).catch(err => {
      console.log("err:", err.errors)
    })
复制代码

image.png

以上就是手写Promise的所有思路，主要的实现还是搞清楚then方法的设计，搞定他，就搞定了Promise的90%了。其他方法就是理解使用就可以实现了。

xdm,多多点赞，希望有帮助。

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云