手写Promise及其方法

一、Promise-then

/**
 * promise实例的状态常量
 */

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

/**
 * 处理then函数的参数(onfulfilled,onrejected)的执行结果
 */

function resolvePromise (promise2, x, resolve, reject) {
  
  if (promise2 === x) {
    return reject(
      new TypeError("Chaining cycle detected for promise #<Promise>")
    )
  }

  if (
    (typeof x === 'object' && x !== null) 
    || typeof x === 'function'
  ) {
    let called = false // 防止多次调用成功或失败
    try {
      let then = x.then
      if (typeof then === 'function') {
        then.call(x,
          y => {
            if (called) return
            called = true
            resolvePromise(promise2, y, resolve, reject)
          },
          r => {
            if (called) return
            called = true
            reject(r)
          })
      } else {
        resolve(x)
      }
    } catch (e) {
      if (called) return
      called = true
      reject(e)
    }
  } else {
    resolve(x)
  }
}

class Promise {
  
  constructor (executor) {
    this.status = PENDING
    this.value = undefined
    this.reason = undefined

    this.onfulfilledCallback = []
    this.onrejectedCallback = []

    const resolve = (value) => {
      if (this.status === PENDING) {
        this.status = FULFILLED
        this.value = value
        this.onfulfilledCallback.forEach(fn => fn())
      }
    }

    const reject = (reason) => {
      if (this.status === PENDING) {
        this.status = REJECTED
        this.reason = reason
        this.onrejectedCallback.forEach(fn => fn())
      }
    }

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

  then (onfulfilled, onrejected) {
    
    onfulfilled = typeof onfulfilled === 'function'
      ? onfulfilled
      : value => value
    
    onrejected = typeof onrejected === 'function'
      ? onrejected
      : err => { throw err }
    
    const promise2 = new Promise((resolve, reject) => {
      
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            const x = onfulfilled(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      }

      if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            const x = onrejected(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      }

      if (this.status === PENDING) {
        this.onfulfilledCallback.push(() => {
          setTimeout(() => {
            try {
              const x = onfulfilled(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })

        this.onrejectedCallback.push(() => {
          setTimeout(() => {
            try {
              const x = onrejected(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
      }
    })
    
    return promise2
  }
}

/**
 * 用于promises-aplus-tests
 */

// Promise.defer = Promise.deferred = function () {
//   let dfd = {}
//   dfd.promise = new Promise((resolve, reject) => {
//     dfd.resolve = resolve
//     dfd.reject = reject
//   })
//   return dfd
// }

// module.exports = Promise

/**
 * 判断一个值是否是promise实例
 */

const isPromise = (value) => {
  if (
    (typeof value === 'object' && value !== null) 
    || typeof value === 'function'
  ) {
    if (typeof value.then === 'function') {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
}

二、catch-finally

class Promise{
  // ...
  
  catch (onrejected) {
    return this.then(null, onrejected)
  }

  finally (cb) {
    return this.then(
      res => Promise.resolve(cb()).then(() => res),
      err => Promise.resolve(cb()).catch(() => err)
    )
  }
}

三、resolve-reject

class Promise{
  // ...
  
  static resolve (value) {
    return new Promise((resolve, reject) => {
      if (isPromise(value)) {
        value.then(resolve, reject)
      } else {
        resolve(value)
      }
    })
  }

  static reject (value) {
    return new Promise((resolve, reject) => {
      reject(value)
    })
  }
}

四、race

Promise.race：谁先改变状态就返回谁的结果。

class Promise{
  // ...
  
  static race (values) {
    return new Promise((resolve, reject) => {
      for (let i = 0; i < values.length; i++) {
        const cur = values[i]
        if (isPromise(cur)) {
          cur.then(resolve, reject)
        } else {
          resolve(cur)
        }
      }
    })
  }
}

五、all

Promise.all：状态都是fulfilled，返回所有结果，有一个rejected，就返回rejected结果。

class Promise{
  // ...
  
  static all (values) {
    return new Promise((resolve, reject) => {

      let ret = []
      let index = 0

      function processData (i, val) {
        ret[i] = val
        if (++index === values.length) {
          resolve(ret)
        }
      }

      for (let i = 0; i < values.length; i++) {
        const cur = values[i]
        if (isPromise(cur)) {
          cur.then(val => {
            processData(i, val)
          }, reject)
        } else {
          processData(i, cur)
        }
      }
    })
  }
}

六、allSettled

Promise.allSettled：状态总是fulfilled，记录所有成功失败结果。

class Promise{
  // ...
  
  static allSettled (values) {
    return new Promise((resolve, reject) => {
      let ret = []
      let index = 0

      function processData (i, val, type) {
        ret[i] = {
          status: type === 'value' ? FULFILLED : REJECTED,
          [type]: val
        }
        if (++index === values.length) {
          resolve(ret)
        }
      }

      for (let i = 0; i < values.length; i++) {
        const cur = values[i]
        if (isPromise(cur)) {
          cur.then(res => {
            processData(i, res, 'value')
          }, err => {
            processData(i, err, 'reason')
          })
        } else {
          processData(i, cur, 'value')
        }
      }
    })
  }
}

七、any

Promise.any：有一个fulfilled，就返回fulfilled的结果，都rejected，则返回rejecte。

class Promise{
  // ...
  
  static any (values) {
    return new Promise((resolve, reject) => {
      let errData = []
      let index = 0

      function processError (i, err) {
        errData[i] = err

        if (++index === values.length) {
          reject("AggregateError: All promises were rejected")
        }
      }

      for (let i = 0; i < values.length; i++) {
        const cur = values[i]
        if (isPromise(cur)) {
          cur.then(resolve, err => {
            processError(i, err)
          })
        } else {
          resolve(cur)
        }
      }
    })
  }
}

参考链接

• Promises/A+：https://promisesaplus.com/
• 阮一峰 ES6教程：https://wangdoc.com/es6/promise.html