之前曾翻譯過Promises/A+文檔，但當時僅對文檔文本內容有所了解，而實際的Promise實現仍一知半解。最近看到工業聚老師的《100 行代碼實現 Promises/A+ 規范》 - 知乎，對Promise的規范有了新的理解。以下是參照前文的一個實現，主要是記錄自己對Promise的理解。參考注釋：

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

// 公共方法
const isObject = (obj) => !!(obj && typeof obj === 'object')
const isFunction = (fn) => typeof fn === 'function'
const isPromise = (promise) => promise instanceof Promise
const isThenable = (obj) => (isFunction(obj) || isObject(obj)) && 'then' in obj
// 1.1 一個thenable是一個函數或者對象，同時有then方法
const isIterable = (obj) => {
  if (obj == null) {
    return false
  }
  return typeof obj[Symbol.iterator] === 'function'
}


class Promise {
  constructor(f) {
    this.state = PENDING
    this.result = null
    this.callbacks = []

    const onFulfilled = (value) => transition(this, FULFILLED, value)
    const onRejected = (reason) => transition(this, REJECTED, reason)

    // 是否狀態已變化 flag
    let ignore = false

    const resolve = (value) => {
      if (ignore) return
      ignore = true
      resolvePromise(this, value, onFulfilled, onRejected)
    }

    const reject = (reason) => {
      if (ignore) return
      ignore = true
      onRejected(reason)
    }
    
    // 如果執行new Promise時出錯，則將錯誤傳給reject
    try {
      f(resolve, reject)
    } catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    // 2.2.7 必須返回一個Promise
    return new Promise((resolve, reject) => {
      const callback = { onFulfilled, onRejected, resolve, reject }
      // 判斷注冊時，當前promise的狀態
      if (this.state === PENDING) {
        this.callbacks.push(callback)
      } else {
        //  如果不是pending，則異步執行掉它  3.1 
        setTimeout(() => handleCallback(callback, this.state, this.result), 0)
        // handleCallback拿到的resolve,reject都是屬于then方法返回的promise，我們將它記為promise2
      }
    })
  }

  // 規范內沒有的, ES6的部分實現
  catch(onRejected) {
    return this.then(null, onRejected)
  }
  static resolve(value) {
    return new Promise((resolve) => resolve(value))
  }
  static reject(reason) {
    return new Promise((_, reject) => reject(reason))
  }
  
  static all(promises) {
    if (!isIterable(promises)) {
      throw new TypeError('params is not iterable')
    }
    const results = []
    let count = 0
    let done = false

    return new Promise((resolve, reject) => {
      for (const p of promises) {
        const i = count++ // 同步遍歷所有迭代器內容
        Promise.resolve(p).then(
          (result) => {
            if (done) return
            results[i] = result
            count-- // resolve 就減少一個count
            if (count === 0 ) {
              resolve(results)
            }
          },
          (error) => {
            if (done) return
            done = true
            reject(error)
          }
        )
      }
      // 如果傳入的迭代器成員為空，則直接返回迭代器本身
      if (count === 0) { resolve(promises) }
    })
  }

  static race(promises) {
    if (!isIterable(promises)) {
      throw new TypeError('params is not iterable')
    }

    let done = false

    return new Promise((resolve, reject) => {
      for (const p of promises) {
        count++
        Promise.resolve(p).then((result) => {
          if (done) return
          done = true
          resolve(result)
        }, (error) => {
          if (done) return
          done = true
          reject(error)
        })
      }
    })
  }
}

// promise狀態遷移公共方法
const transition = (promise, state, result) => {
  if (promise.state !== PENDING) return
  promise.state = state
  promise.result = result
  // 異步將所有callbacks執行掉
  setTimeout(() => {
    // resolve時，處理掉所有注冊的任務
    while (callbacks.length) handleCallback(callbacks.shift(), state, result)
  }), 0)
}

// 執行then方法注冊onFulfilled或處理錯誤
const handleCallback = (callback, state, result) => {
  const { onFulfilled, onRejected, resolve, reject } = callback // resolve, reject 是 then返回的Promise注冊的方法
  try {
    // isFunction: 2.2.1 不是函數則忽略
    if (state === FULFILLED) {
      // 2.2.7
      isFunction(onFulfilled) ? resolve(onFulfilled(result)) : resolve(result)
    } else if (state === REJECTED) {
      isFunction(onRejected) ? resolve(onRejected(result)) : reject(result)
    }
  } catch (error) {
    reject(error)
  }
}

// 2.3 Promise Resolution Procedure 提供互通性
// onFulfilled的返回值 x 如果也是一個符合規范的 promise對象(thenable)，
const resolvePromise = (promise, x, resolve, reject) => {
  // 2.3.1
  if (x === promise) {
    const reason = new TypeError('Can not fufill promise with itself')
    return reject(reason)
  }

  // 2.3.2 
  // 當resolve一個x時，需要等待x的狀態結束，再resolve promise自身
  // 即，檢查resolve的value 是否是promise，如果是，則通過then方法注冊，將 promise的狀態遷移注冊給 x 的then方法，等待x的fulfilled
  if (isPromise(x)) {
    return x.then(resolve, reject)
  }
  // 檢查x是否為thenable對象，如果是，則表示它可以嘗試讓當前實現的Promise處理
  // 通過這種方式接受其他符合A+規范的的Promise實現(實現了then方法的Promise)
  if (isThenable(x)) {
    try {
      const then = x.then
      if (isFunction(then)) {
        // 當x有then方法，表示它是一個兼容的Promise實現
        // 這里創建一個新的Promise，將x的then傳入，并且then原來的resolve
        // 執行另一個異步流程，也就是說等待x的狀態最終為fufilled/rejected執行原來的resolve/reject
        // 實現了對其他Promise實現的兼容
        return new Promise(then.bind(x)).then(resolve, reject)
      }
    } catch (error) {
      return reject(error)
    }
  }
  
  // 如果都不是，則resolve掉這個值
  resolve(x)
}

除了基本實現，工業聚老師的文章還提到一些關于callback style async的內容，十分受用，這里就不展開來說，原文非常精彩，建議去看一下。