js实现简易版Promise

本文介绍了一个简单的自定义Promise实现,包括构造函数、then、catch、resolve、reject等核心方法及all、race静态方法。该实现遵循Promise规范,支持异步操作、错误处理及链式调用。
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  constructor (executor) {
    this.state = PENDING
    this.result = undefined
    this.callbacks = []

    let resolve = value => {
      if (this.state !== PENDING) return
      this.result = value
      this.state = FULFILLED
      setTimeout(() => {
        this.callbacks.forEach(item => item.onFulfilled())
      })
    }

    let reject = reason => {
      if (this.state !== PENDING) return
      this.result = reason
      this.state = REJECTED
      setTimeout(() => {
        this.callbacks.forEach(item => item.onRejected())
      })
    }

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

  then (onFulfilled, onRejected) {
    if (typeof onFulfilled !== 'function') {
      onFulfilled = value => value
    }
    if (typeof onRejected !== 'function') {
      onRejected = reason => {
        throw reason
      }
    }
    return new MyPromise((resolve, reject) => {
      const run = (fun) => {
        let return_v = fun(this.result)
        if (return_v instanceof MyPromise) {
          return_v.then(v => {
            resolve(v)
          }, r => {
            reject(r)
          })
        } else {
          resolve(return_v)
        }
      }
      // 同步成功执行的回调
      if (this.state === FULFILLED) {
        setTimeout(() => {
          run(onFulfilled)
        })
      }
      // 同步执行失败的回调
      if (this.state === REJECTED) {
        setTimeout(() => {
          run(onRejected)
        })
      }
      // 异步执行的回调
      if (this.state === PENDING) {
        this.callbacks.push({
          onFulfilled: () => {
            try {
              run(onFulfilled)
            } catch (err) {
              reject(err)
            }
          },
          onRejected: () => {
            try {
              run(onRejected)
            } catch (err) {
              reject(err)
            }
          }
        })
      }
    })
  }

  catch (onRejected) {
    return this.then(undefined, onRejected)
  }

  static resolve (value) {
    return new MyPromise((resolve, reject) => {
      if (value instanceof MyPromise) {
        value.then(v => {
          resolve(v)
        }, r => {
          reject(r)
        })
      } else {
        resolve(value)
      }
    })
  }

  static reject (reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason)
    })
  }

  static all (promises) {
    return new MyPromise((resolve, reject) => {
      let count = 0
      let res = []
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(v => {
          count++
          res[i] = v
          if (count === promises.length) {
            resolve(res)
          }
        }, r => {
          reject(r)
        })
      }
    })
  }

  static race (promises) {
    return new MyPromise((resolve, reject) => {
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(v => {
          resolve(v)
        }, r => {
          reject(r)
        })
      }
    })
  }
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值