为更好的明白， 引荐浏览
Promise/A+ 范例

完成一个简易版 Promise

在完成相符 Promise/A+ 范例的代码之前，我们能够先来完成一个简易版 Promise，由于在口试中，假如你能完成出一个简易版的 Promise 基础能够过关了。

那末我们先来搭建构建函数的大致框架

const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn) {
  const that = this
  that.state = PENDING
  that.value = null
  that.resolvedCallbacks = []
  that.rejectedCallbacks = []
  // 待完美 resolve 和 reject 函数
  // 待完美实行 fn 函数
}

• 起首我们建立了三个常量用于示意状况，关于常常运用的一些值都应当经由历程常量来治理，便于开辟及后期保护
• 在函数体内部起首建立了常量 that，由于代码能够会异步实行，用于猎取准确的 this 对象
• 一开始 Promise 的状况应当是 pending
• value 变量用于保留 resolve 或许 reject 中传入的值
• resolvedCallbacks 和 rejectedCallbacks 用于保留 then 中的回调，由于当实行完 Promise 时状况能够照样守候中，这时候应当把 then 中的回调保留起来用于状况转变时运用

接下来我们来完美 resolve 和 reject 函数，添加在 MyPromise 函数体内部

function resolve(value) {
  if (that.state === PENDING) {
    that.state = RESOLVED
    that.value = value
    that.resolvedCallbacks.map(cb => cb(that.value))
  }
}

function reject(value) {
  if (that.state === PENDING) {
    that.state = REJECTED
    that.value = value
    that.rejectedCallbacks.map(cb => cb(that.value))
  }
}

这两个函数代码相似，就一同剖析了

• 起首两个函数都得推断当前状况是不是为守候中，由于范例划定只要守候态才能够转变状况
• 将当前状况更改成对应状况，而且将传入的值赋值给 value
• 遍历回调数组并实行

完成以上两个函数今后，我们就该完成怎样实行 Promise 中传入的函数了

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

• 完成很简朴，实行传入的参数而且将之前两个函数当作参数传进去
• 要注意的是，能够实行函数历程当中会碰到毛病，须要捕捉毛病而且实行 reject 函数

末了我们来完成较为庞杂的 then 函数

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  const that = this
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v
  onRejected =
    typeof onRejected === 'function'
      ? onRejected
      : r => {
          throw r
        }
  if (that.state === PENDING) {
    that.resolvedCallbacks.push(onFulfilled)
    that.rejectedCallbacks.push(onRejected)
  }
  if (that.state === RESOLVED) {
    onFulfilled(that.value)
  }
  if (that.state === REJECTED) {
    onRejected(that.value)
  }
}

• 起首推断两个参数是不是为函数范例，由于这两个参数是可选参数
• 当参数不是函数范例时，须要建立一个函数赋值给对应的参数，同时也完成了透传，比方以下代码

// 该代码现在在简朴版中会报错
// 只是作为一个透传的例子
Promise.resolve(4).then().then((value) => console.log(value))

• 接下来就是一系列推断状况的逻辑，当状况不是守候态时，就去实行相对应的函数。假如状况是守候态的话，就往回调函数中 push 函数，比方以下代码就会进入守候态的逻辑

new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 0)
}).then(value => {
  console.log(value)
})

以上就是简朴版 Promise 完成

完成一个相符 Promise/A+ 范例的 Promise

接下来大部分代码都是依据范例去完成的。

我们先来革新一下 resolve 和 reject 函数

function resolve(value) {
  if (value instanceof MyPromise) {
    return value.then(resolve, reject)
  }
  setTimeout(() => {
    if (that.state === PENDING) {
      that.state = RESOLVED
      that.value = value
      that.resolvedCallbacks.map(cb => cb(that.value))
    }
  }, 0)
}
function reject(value) {
  setTimeout(() => {
    if (that.state === PENDING) {
      that.state = REJECTED
      that.value = value
      that.rejectedCallbacks.map(cb => cb(that.value))
    }
  }, 0)
}

• 关于 resolve 函数来讲，起首须要推断传入的值是不是为 Promise 范例
• 为了保证函数实行递次，须要将两个函数体代码运用 setTimeout 包裹起来

接下来继承革新 then 函数中的代码，起首我们须要新增一个变量 promise2，由于每一个 then 函数都须要返回一个新的 Promise 对象，该变量用于保留新的返回对象，然后我们先来革新推断守候态的逻辑

if (that.state === PENDING) {
  return (promise2 = new MyPromise((resolve, reject) => {
    that.resolvedCallbacks.push(() => {
      try {
        const x = onFulfilled(that.value)
        resolutionProcedure(promise2, x, resolve, reject)
      } catch (r) {
        reject(r)
      }
    })

    that.rejectedCallbacks.push(() => {
      try {
        const x = onRejected(that.value)
        resolutionProcedure(promise2, x, resolve, reject)
      } catch (r) {
        reject(r)
      }
    })
  }))
}

• 起首我们返回了一个新的 Promise 对象，并在 Promise 中传入了一个函数
• 函数的基础逻辑照样和之前一样，往回调数组中 push 函数
• 一样，在实行函数的历程当中能够会碰到毛病，所以运用了 try...catch 包裹
• 范例划定，实行 onFulfilled 或许 onRejected 函数时会返回一个 x，而且实行 Promise 处置惩罚历程，这是为了差别的 Promise 都能够兼容运用，比方 JQuery 的 Promise 能兼容 ES6 的 Promise

接下来我们革新推断实行态的逻辑

if (that.state === RESOLVED) {
  return (promise2 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
      try {
        const x = onFulfilled(that.value)
        resolutionProcedure(promise2, x, resolve, reject)
      } catch (reason) {
        reject(reason)
      }
    })
  }))
}

• 实在人人能够发明这段代码和推断守候态的逻辑基础一致，无非是传入的函数的函数体须要异步实行，这也是范例划定的
• 关于推断谢绝态的逻辑这里就不逐一赘述了，留给人人本身完成这个功课

末了，固然也是最难的一部分，也就是完成兼容多种 Promise 的 resolutionProcedure 函数

function resolutionProcedure(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Error'))
  }
}

起首范例划定了 x 不能与 promise2 相称，如许会发作轮回援用的题目，比方以下代码

let p = new MyPromise((resolve, reject) => {
  resolve(1)
})
let p1 = p.then(value => {
  return p1
})

然后须要推断 x 的范例

if (x instanceof MyPromise) {
    x.then(function(value) {
        resolutionProcedure(promise2, value, resolve, reject)
    }, reject)
}

这里的代码是完整根据范例完成的。假如 x 为 Promise 的话，须要推断以下几个状况：

1. 假如 x 处于守候态，Promise 需坚持为守候态直至 x 被实行或谢绝
2. 假如 x 处于其他状况，则用雷同的值处置惩罚 Promise

固然以上这些是范例须要我们推断的状况，实际上我们不推断状况也是可行的。

接下来我们继承根据范例来完成盈余的代码

let called = false
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  try {
    let then = x.then
    if (typeof then === 'function') {
      then.call(
        x,
        y => {
          if (called) return
          called = true
          resolutionProcedure(promise2, y, resolve, reject)
        },
        e => {
          if (called) return
          called = true
          reject(e)
        }
      )
    } else {
      resolve(x)
    }
  } catch (e) {
    if (called) return
    called = true
    reject(e)
  }
} else {
  resolve(x)
}

• 起首建立一个变量 called 用于推断是不是已调用过函数
• 然后推断 x 是不是为对象或许函数，假如都不是的话，将 x 传入 resolve 中
• 假如 x 是对象或许函数的话，先把 x.then 赋值给 then，然后推断 then 的范例，假如不是函数范例的话，就将 x 传入 resolve 中
• 假如 then 是函数范例的话，就将 x 作为函数的作用域 this 调用之，而且通报两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise，两个回调函数都须要推断是不是已实行过函数，然后举行响应的逻辑
• 以上代码在实行的历程当中假如抛错了，将毛病传入 reject 函数中

以上就是相符 Promise/A+ 范例的完成