typeScript版仿Promise源码

用户7043603

发布于 2022-02-26 14:55:51

5120

发布于 2022-02-26 14:55:51

文章被收录于专栏：用户7043603的专栏

作为一个前端, 还有人说不会用 Promise,真的就有点过分了. 为了跟上卷的潮流,我们今天就用typeScript 来实现一下 Promise 的实现. *写 promise 之前我们需要明确一些常识.

必须是一个构造函数或是类(我们在使用时必须 new, js中类实际即时构造函数的语法糖)
promise 有三个状态 padding(等待) fulfilled(完成) reject(异常)
promise 状态一旦改变就冻结, 不再发生改变
支持链式调用
拥有 all, resolve, reject, race 四个静态方法

下面我们开始进入代码块

// 首先promise 有三个状态, 我们先用常量定义一下
const PADDING: string = 'padding' // 等待
const FULFILLED: string = 'fulfilled' // 完成
const REJECT: string = 'reject' // 拒绝
type callbackType = { (val: any): any }

class CustomPromise {
 status = PADDING
 value: any = ''
 reason: any = ''
 // 调用 new 关键字时执行
 constructor(execute: { (fn1: callbackType, fn2: callbackType): any }) {
   execute(this.resolve.bind(this), this.reject.bind(this))
 }
 resolve(value: any) {
   const { status } = this
   if (status !== PADDING) return  // promise 状态一旦凝固, 将不在发生改变, 所以此处做了判断
   this.status = FULFILLED // padding状态改变状态
   this.value = value // 将 resolve 值存储起来,在 then 回调时使用
 }
 // 同 resolve
 reject(reason: any) {
   const { status } = this
   if (status !== PADDING) return
   this.status = REJECT
   this.reason = reason
 }
 // promise 使用 then 接受两个回调函数
 then(fulCallback: callbackType, failCallback?: callbackType) {
   const { status, value, reason } = this
   if (status === FULFILLED) {
     fulCallback(value) // 通过 callback 在回调函数里再获取 value 值
   }
   // 同 resolve
   if (status === REJECT) {
     failCallback!(reason)
   }
 }
}

以上我们就实现了一个很简单的 Promise, 这个 Promise 很弱, 只能执行同步代码😭, 也不支持链式调用.显然这样肯定不行的, 大家都知道, Promise的提出就是为了解决异步回调地狱问题, 下面我们就来加入异步的处理. *异步处理我们大致解决方案是

首先在 then 判断 Promise 状态, 如果是 padding, 说明 promise 异步了
确定异步了,resolve肯定是迟于 then 执行了, 所以我们将 then 回调放到一个队列里存起来, 当 promise 状态发生变更时,再去调用 .then回调,这样我们就解决了异步回调问题
以下代码请参照① ② 循序查看

  const PADDING: string = 'padding' // 等待
  const FULFILLED: string = 'fulfilled' // 完成
  const REJECT: string = 'reject' // 拒绝
  type callbackType = { (val: any): any }

  class CustomPromise {
    status = PADDING
    value: any = ''
    reason: any = ''
+  fulCallbackList: Function[] = []
+  failCallbackList: Function[] = []
    // 调用 new 关键字时执行
    constructor(execute: { (fn1: callbackType, fn2: callbackType): any }) {
      execute(this.resolve.bind(this), this.reject.bind(this))
    }
    resolve(value: any) {
      const { status, fulCallbackList } = this
      if (status !== PADDING) return  // promise 状态一旦凝固, 将不在发生改变, 所以此处做了判断
      this.status = FULFILLED // padding状态改变状态
      this.value = value // 将 resolve 值存储起来,在 then 回调时使用
      // ② 如果异步了, fulCallbackList 队列存放的就是.then 的回调函数
    +  fulCallbackList.forEach(fn => fn())
    }
    // 同 resolve
    reject(reason: any) {
      const { status, failCallbackList } = this
      if (status !== PADDING) return
      this.status = REJECT
      this.reason = reason
    +  failCallbackList.forEach(fn => fn())
    }
    // promise 使用 then 接受两个回调函数
    then(fulCallback: callbackType, failCallback?: callbackType) {
      const { status, value, reason } = this
      if (status === FULFILLED) {
        fulCallback(value) // 通过 callback 在回调函数里再获取 value 值
      }
      // 同 resolve
      if (status === REJECT) {
        failCallback!(reason)
      }
      // ① 异步处理
     + if (status === PADDING) { // 将回调函数放到队列里,在状态发生改变时再调用
     +   this.fulCallbackList.push(() => {
     +     fulCallback(value)
     +    })
     +   this.failCallbackList.push(() => {
     +    failCallback!(reason)
     +  })
     + }  
    }
  }

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript