手写promise

本文介绍了如何创建一个自定义Promise类,它接受一个函数作为参数并检查其类型,同时管理Promise的不同状态(PENDING、FULFILLED、REJECTED)。通过then和catch方法处理回调,以及resolve和reject函数的使用,展示了如何在异步操作中控制状态流转。
摘要由CSDN通过智能技术生成
// 判断变量是否为function
const isFunction = variable => typeof variable === 'function'
// 三种状态
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
// 定义Promise的三种状态常量
class MyPromise {
  constructor(handle) {
    if (!isFunction(handle)) {
      throw new Error('MyPromise must accept a function as a parameter')
    }
    // 添加状态
    this._status = PENDING
    // 添加状态
    this._value = undefined
    // 添加成功回调函数队列
    this._fulfilledQueues = []
    // 添加失败回调函数队列
    this._rejectedQueues = []
    // 执行handle
    try {
      handle(this._resolve.bind(this), this._reject.bind(this))
    } catch (err) {
      this._reject(err)
    }
  }
  // 添加resolve时执行的函数
  _resolve(val) {
    const run = () => {
      if(this._status !== PENDING) return
      // 依次执行成功队列中的函数,并清空队列
      const runFulfilled = (value) => {
        let cb;
        while(cb = this._fulfilledQueues.shift()) {
          cb(value)
        }
      }
      // 依次执行失败队列中的函数,并清空队列
      const runRejected = (error) => {
        let cb;
        while(cb = this._rejectedQueues.shift()) {
          cb(error)
        }
      }
      /**
      * 如果resolve的参数为Promise对象,则必须等待该Promise对象状态改变后,
      * 当前Promise的状态才会改变,且状态取决于参数Promise对象的状态
      */ 
      if(val instanceof MyPromise) {
        val.then(value => {
          this._value = value
          this._status = FULFILLED
          runFulfilled(value)
        }, err => {
          this._value = err
          this._status = REJECTED
          runRejected(err)
        })
      } else {
        this._value = val
        this._status = FULFILLED
        runFulfilled(val)
      }
    }
    // 为了支持同步的Promise, 这里采用异步调用
    setTimeout(() => run(), 0)
  }
  // 添加reject时执行的函数
  _reject(err) {
    if(this._status !== PENDING) return
    const run = () => {
      this._status = REJECTED
      this._value = err
      let cb;
      while(cb = this._rejectedQueues.shift()) {
        cb(err)
      }
    }
    setTimeout(run, 0)
  }

  // 添加then方法
  then(onFulfilled, onRejected) {
    const {_value, _status } = this
    // 返回一个新的Promise对象
    return new Promise((onFulfilledNext, onRejectedNext) => {
      // 封装一个成功时执行的函数
      let fulfilled = value => {
        try {
          if(!isFunction(onFulfilled)) {
            onFulfilledNext(value)
          } else {
            let res = onRejected(value);
            if(res instanceof MyPromise) {
              // 如果当前回调函数返回MyPromise对象,必须等待其状态改变后再执行下一个回调
              res.then(onFulfilledNext, onRejectedNext)
            } else {
              onFulfilledNext(res)
            }
          }
        } catch (err) {
          onRejectedNext(err)
        }
      }
    // 封装一个失败时执行的函数
    let rejected = error => {
      try {
        if(!isFunction(onRejected)){
          onRejectedNext(error)
        } else {
          let res = onRejected(error)
          if(res instanceof MyPromise) {
            // 如果当前回调函数返回MyPromise对象, 必须等待其状态改变后再执行下一个回调
            onFulfilledNext(res)
          }
        }
      } catch (error) {
        // 如果函数执行出错,新的Promise方法回调加入执行队列等待执行
        onRejectedNext(error)
      }
    }
    switch (_status) {
      // 当状态为pending时,将then方法回调函数加入执行队列等待执行
      case PENDING:
        this._fulfilledQueues.push(onFulfilled)
        this._rejectedQueues.push(onRejected)
        break
      case FULFILLED:
        onFulfilled(_value)
        break
      case REJECTED:
        onRejected(_value)
        break
      }
    })
  }

  // 添加catch方法
  catch(onRejected) {
    return this.then(undefined, onRejected)
  }

  // 添加静态resolve方法
  static resolve(value) {
    // 如果参数是MyPromise实例,直接返回这个实例
    if(value instanceof MyPromise) return value
    return new MyPromise(resolve => resolve(value))
  }

  // 静态reject方法
  static reject (value) {
    return new MyPromise((resolve, reject) => reject(value))
  }

  // 静态all方法
  static all (list) {
    return new MyPromise((resolve, reject) => {
      /** 
       * 返回值的集合
      */
      let values = []
      let count = 0
      for(let [i, p] of list.entries()) {
        // 数组参数如果不是MyPromise实例,先调用MyPromise.resolve
        this.resolve(p).then(res => {
          values[i] = res
          count++
          if(count === list.length) resolve(values)
        }, err => {
          rejected(err)
        })
      }
    })
  }

  // 添加静态race方法
  static race (list) {
    return new MyPromise((resolve, reject) => {
      for(let p of list) {
        // 只要有一个实例率先改变状态,新的MyPromise的状态就跟着改变
        this.resolve(p).then(res => {
          resolve(res)
        }, err => {
          reject(err)
        })
      }
    })
  }

  finally(cb) {
    return this.then(
      value => MyPromise.resolve(cb()).then(() => value),
      reason => MyPromise.resolve((cb)).then(() => { throw reason})
    )
  }

}
const name = new MyPromise((resolve, reject) => {
  console.log(1)
  resolve()
})
name.then((res, rej) => {
  console.log(2)
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值