Promise封装

注：文章解释不多，仅为记录学习
封装步骤如下

class Promise {
  constructor(executor) {
    // 初始状态值
    this.PromiseState = 'pending'
    // 结果值
    this.PromiseResult = null
    // 存储函数：以数组的形式存储then方法中的形参函数，因为then方法可以多次调用
    this.callbacks = []

    // 保存this指向：resolve函数this指向不是Promise
    const self = this
    function resolve(data) {
      // 判断状态值，如果不是pending不执行下面代码，因为如果同事调用resolve和reject ，promise的状态是第一个 不会发生改变
      if (self.PromiseState !== 'pending') return
      // 修改状态
      self.PromiseState = 'filfilled'
      // 修改值
      self.PromiseResult = data

      // 异步调用：如果是异步情况执行resolve需要调用then方法中的形参函数
      self.callbacks.forEach((item) => item.onResolved(data))
    }

    function reject(data) {
      if (self.PromiseState !== 'pending') return
      self.PromiseState = 'rejected'
      self.PromiseResult = data

      self.callbacks.forEach((item) => item.onRejected(data))
    }

    // 同步调用
    try {
      executor(resolve, reject)
    } catch (err) {
      reject(err)
    }
  }

  // 添加then方法
  then(onResolved, onRejected) {
    // 保存this指向
    const self = this

    // 判断是否传入回调函数，如果没有的话添加默认回调函数
    if (typeof onResolved !== 'function') {
      onResolved = (value) => value
    }
    if (typeof onRejected !== 'function') {
      onRejected = (reason) => reason
    }

    return new Promise((resolve, reject) => {
      // 封装callback方法：处理调用then返回值的情况
      function callback(fn) {
        try {
          const result = fn(self.PromiseResult)
          // 如果返回值是Promise对象
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v)
              },
              (r) => reject(r)
            )
          } else {
            resolve(result)
          }
        } catch (r) {
          reject(r)
        }
      }
      if (this.PromiseState === 'filfilled') {
        callback(onResolved)
      }
      if (this.PromiseState === 'rejected') {
        callback(onRejected)
      }

      if (this.PromiseState === 'pending') {
        this.callbacks.push({
          onResolved: () => {
            callback(onResolved)
          },
          onRejected: () => {
            callback(onRejected)
          }
        })
      }
    })
  }

  // 添加catch方法：可直接调用then方法
  catch(onRejected) {
    this.then(null, onRejected)
  }

  // 添加resolve静态方法：
  static resolve(value) {
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(
          (v) => {
            resolve(v)
          },
          (r) => {
            reject(r)
          }
        )
      } else {
        resolve(value)
      }
    })
  }

  // 添加reject静态方法
  static reject(reason) {
    return new Promise((resolve, reject) => {
      reject(reason)
    })
  }

  // 添加all静态方法
  static all(promises) {
    return new Promise((resolve, reject) => {
      let count = 0
      let arr = []
      promises.forEach((item, index) => {
        item.then(
          (v) => {
            count++
            arr[i] = v
            if (count === promises.length) {
              resolve(arr)
            }
          },
          (r) => {
            reject(r)
          }
        )
      })
    })
  }

  // 添加race方法
  static race(promises) {
    return new Promise((resolve, reject) => {
      promises.forEach(
        (item) => {
          item.then((v) => {
            resolve(v)
          })
        },
        (r) => {
          reject(r)
        }
      )
    })
  }
}