手写Promise

用户4799821162406
73 阅读12分钟

Promise 类核心逻辑实现

  1. Promise就是一个类，在执行这个类的时候需要传递一个执行器进去，执行器会立即调用
  2. Promise中有三种状态，分别是成功(fulfilled)、失败 (rejected)、等待(pending)，一旦状态确定就不可更改，状态改变分别是pending -> fulfilled和pending -> rejected
  3. resolve和reject函数是用来更改状态的resolve将状态更改为fulfilled，reject将状态更改为rejected
  4. then方法内部左的事情就是判断状态，如果状态是成功，调用成功的回调函数，如果状态时失败，调用失败的回调函数，promise对象是被定义在原型对象中的
  5. then成功回调有一个参数，表示成功之后的值 then失败回调有一个参数，表示失败后的原因
let promise = new Promise((resolve, reject) => {
 // resolve('成功')
 // reject('失败')
})

promise.then(value => {}, reason => {})

const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败
class MyPromise {
  constructor (executor) {
    executor(this.resolve, this.reject)
  }
  // promise 状态
  status = PENDING
  // 成功之后的值 
  value = undefined
  // 失败之后的原因
  reason = undefined
  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
  }
  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为失败
    this.status = REJECTED
    // 保存失败之后的原因
    this.reason = reason
  }
  then (successCallback, failCallback) {
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      failCallback(this.reason)
    }
  }
}

module.exporte = MyPromise

在Promise 类核中加入异步逻辑

现在执行器当中存在异步代码等待2秒后执行，在执行到then方法它要判断这个状态，由于resolve异步执行了，现在还未执行，所以现在状态是等待的，然后我们将成功回调和失败回调存储起来，当异步代码执行完成之后，调用resolve或者reject的时候判断一下成功或者失败回调是否存在，如果存在则调用。

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功')
  }, 2000)
 // reject('失败')
})

promise.then(value => {
  console.log(value)
}, reason => {
  console.log(reason)
})

const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败
class MyPromise {
  constructor (executor) {
    executor(this.resolve, this.reject)
  }
  // promise 状态
  status = PENDING
  // 成功之后的值 
  value = undefined
  // 失败之后的原因
  reason = undefined
  // 成功回调
  successCallback = undefined
  // 失败回调
  failCallback = undefined
  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果存在 调用
    this.successCallback && this.successCallback(this.value)
  }
  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为失败
    this.status = REJECTED
    // 保存失败之后的原因
    this.reason = reason
    // 判断成功回调是否存在 如果存在 调用
    this.failCallback && this.failCallback(this.reason)
  }
  then (successCallback, failCallback) {
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      failCallback(this.reason)
    } else {
      // 等待
      // 将成功回调和失败回调存储起来
      this.successCallback = successCallback
      this.failCallback = failCallback
    }
  }
}

module.exporte = MyPromise

实现then方法多次调用添加多个处理函数

由于多次使用then，当状态变成成功或者失败的时候，对应的回调函数是会被依次调用的，同步的时候在判断的过程中状态已经存在，直接调用回调函数即可，异步则用数组存储起来，当状态变成成功或者失败的时候再循环调用这些回调函数

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功')
  }, 2000)
 // reject('失败')
})

promise.then(value => {
  console.log(value)
}, reason => {
  console.log(reason)
})

promise.then(value => {
  console.log(value)
}, reason => {
  console.log(reason)
})

promise.then(value => {
  console.log(value)
}, reason => {
  console.log(reason)
})

const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败
class MyPromise {
  constructor (executor) {
    executor(this.resolve, this.reject)
  }
  // promise 状态
  status = PENDING
  // 成功之后的值 
  value = undefined
  // 失败之后的原因
  reason = undefined
  // 成功回调
  successCallback = []
  // 失败回调
  failCallback = []
  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果存在 调用
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }
  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为失败
    this.status = REJECTED
    // 保存失败之后的原因
    this.reason = reason
    // 判断成功回调是否存在 如果存在 调用
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }
  then (successCallback, failCallback) {
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      failCallback(this.reason)
    } else {
      // 等待
      // 将成功回调和失败回调存储起来
      this.successCallback.push(successCallback)
      this.failCallback.push(failCallback)
    }
  }
}

module.exporte = MyPromise

实现then方法的链式调用

要实现then方法的链式调用需要返回一个promise对象，所以我们在then方法中创建并返回了一个promise，然后我们需要将上一个then方法回调函数的返回值传递给下一个then方法成功的回调，下一个then方法的promise对象就是上一个then方法返回的promise2，当我们调用promise2中的resolve的时候，就可以将值传递下一个then方法的回调函数

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  resolve('成功')
  // reject('失败')
})

function other () {
  return new MyPromise((resolve, reject) => {
    resolve('other')
  })
}
promise.then(value => {
  console.log(value)
  // return 100
  // return other ()
}).then(value => {
  console.log(value)
})

const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败
class MyPromise {
  constructor (executor) {
    executor(this.resolve, this.reject)
  }
  // promise 状态
  status = PENDING
  // 成功之后的值 
  value = undefined
  // 失败之后的原因
  reason = undefined
  // 成功回调
  successCallback = []
  // 失败回调
  failCallback = []
  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果存在 调用
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }
  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为失败
    this.status = REJECTED
    // 保存失败之后的原因
    this.reason = reason
    // 判断成功回调是否存在 如果存在 调用
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }
  then (successCallback, failCallback) {
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        let x = successCallback(this.value)
        // 判断x的值是普通值还是promise对象
        // 如果是普通值 直接调用resolve
        // 如果是promise对象 查看promise对象返回的结果
        // 再根据promise对象返回的结果 决定调用resolve还是reject
        resolvePromise(x, resolve, reject)
      } else if (this.status === REJECTED) {
        failCallback(this.reason)
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(successCallback)
        this.failCallback.push(failCallback)
      }
    })
    return promise2
  }
}
function resolvePromise (x, resolve, reject) {
  if (x instanceof MyPromise) {
    // promise对象
    // x.then(value => reslove(value), reason => reject(reason))
    x.then(reslove, reject)
  } else {
    // 普通值
    resolve(x)
  }
}
module.exporte = MyPromise

then 方法链式调用识别 Promise 对象自返回

如果自己返回了自己，这是不被允许的，否则会循环调用

......
let promise2 = new MyPromise((resolve, reject) => {
  if (this.status === FULFILLED) {
    let x = successCallback(this.value)
    // 判断x的值是普通值还是promise对象
    // 如果是普通值 直接调用resolve
    // 如果是promise对象 查看promise对象返回的结果
    // 再根据promise对象返回的结果 决定调用resolve还是reject
    resolvePromise(promise2, x, resolve, reject)
  }
}
......

我们需要successCallback返回的值和promise2是否相等即可，但是我们在resolvePromise(promise2, x, resolve, reject)代码中无法获取promise2,promise2需要在new MyPromise执行完之后才能有promise2。解决方法是使用setTimeout把原有的部分代码变成异步代码，这个代码会在所有的同步代码执行之后才会执行，所有同步代码执行完了就可以得到promise2，完整代码如下：

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  resolve('成功')
  // reject('失败')
})

function other () {
  return new MyPromise((resolve, reject) => {
    resolve('other')
  })
}
let p1 = promise.then(value => {
  console.log(value)
  return p1
})

p1.then(value => {
  console.log(value)
}, reason => {
  console.log(reason) // 等等这里会报错
})

const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败
class MyPromise {
  constructor (executor) {
    executor(this.resolve, this.reject)
  }
  // promise 状态
  status = PENDING
  // 成功之后的值 
  value = undefined
  // 失败之后的原因
  reason = undefined
  // 成功回调
  successCallback = []
  // 失败回调
  failCallback = []
  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果存在 调用
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }
  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为失败
    this.status = REJECTED
    // 保存失败之后的原因
    this.reason = reason
    // 判断成功回调是否存在 如果存在 调用
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }
  then (successCallback, failCallback) {
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        setTimeout(() => {
          let x = successCallback(this.value)
          // 判断x的值是普通值还是promise对象
          // 如果是普通值 直接调用resolve
          // 如果是promise对象 查看promise对象返回的结果
          // 再根据promise对象返回的结果 决定调用resolve还是reject
          resolvePromise(promise2, x, resolve, reject)
        }, 0)
      } else if (this.status === REJECTED) {
        failCallback(this.reason)
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(successCallback)
        this.failCallback.push(failCallback)
      }
    })
    return promise2
  }
}
function resolvePromise (promise2, x, resolve, reject) {
  if (promise2 === x) {
  return reject(new TypeError('Chaning cycle detected for promise #<Promise>'))
}
  if (x instanceof MyPromise) {
    // promise对象
    // x.then(value => reslove(value), reason => reject(reason))
    x.then(reslove, reject)
  } else {
    // 普通值
    resolve(x)
  }
}
module.exporte = MyPromise

捕获错误及then链式调用其他状态代码补充-将then方法的参数变成可选参数

添加了try catch，以及在then方法前判断了回调是否存在

const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败
class MyPromise {
  constructor (executor) {
    try {
      executor(this.resolve, this.reject)
    } catch (e) {
      this.reject(e)
    }
  }
  // promise 状态
  status = PENDING
  // 成功之后的值 
  value = undefined
  // 失败之后的原因
  reason = undefined
  // 成功回调
  successCallback = []
  // 失败回调
  failCallback = []
  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果存在 调用
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }
  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为失败
    this.status = REJECTED
    // 保存失败之后的原因
    this.reason = reason
    // 判断成功回调是否存在 如果存在 调用
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }
  then (successCallback, failCallback) {
    successCallback ? successCallback : value => value
    failCallback ? failCallback : reason => { throw reason }
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
           let x = successCallback(this.value)
            // 判断x的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve
            // 如果是promise对象 查看promise对象返回的结果
            // 再根据promise对象返回的结果 决定调用resolve还是reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
           let x = failCallback(this.reason)
            // 判断x的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve
            // 如果是promise对象 查看promise对象返回的结果
            // 再根据promise对象返回的结果 决定调用resolve还是reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else {
        setTimeout(() => {
          try {
           let x = successCallback()
            // 判断x的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve
            // 如果是promise对象 查看promise对象返回的结果
            // 再根据promise对象返回的结果 决定调用resolve还是reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
             let x = successCallback(this.value)
              // 判断x的值是普通值还是promise对象
              // 如果是普通值 直接调用resolve
              // 如果是promise对象 查看promise对象返回的结果
              // 再根据promise对象返回的结果 决定调用resolve还是reject
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
             let x = failCallback(this.reason)
              // 判断x的值是普通值还是promise对象
              // 如果是普通值 直接调用resolve
              // 如果是promise对象 查看promise对象返回的结果
              // 再根据promise对象返 回的结果 决定调用resolve还是reject
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
           }
          }, 0)
        })
      }
    })
    return promise2
  }
}
function resolvePromise (promise2, x, resolve, reject) {
  if (promise2 === x) {
  return reject(new TypeError('Chaning cycle detected for promise #<Promise>'))
}
  if (x instanceof MyPromise) {
    // promise对象
    // x.then(value => reslove(value), reason => reject(reason))
    x.then(reslove, reject)
  } else {
    // 普通值
    resolve(x)
  }
}
module.exporte = MyPromise

Promise.all Promise.resolve Promise.catch Promise.finally方法的实现

const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败
class MyPromise {
  constructor (executor) {
    try {
      executor(this.resolve, this.reject)
    } catch (e) {
      this.reject(e)
    }
  }
  // promise 状态
  status = PENDING
  // 成功之后的值 
  value = undefined
  // 失败之后的原因
  reason = undefined
  // 成功回调
  successCallback = []
  // 失败回调
  failCallback = []
  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果存在 调用
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }
  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if (this.status !== PENDING) return 
    // 将状态改为失败
    this.status = REJECTED
    // 保存失败之后的原因
    this.reason = reason
    // 判断成功回调是否存在 如果存在 调用
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }
  then (successCallback, failCallback) {
    successCallback ? successCallback : value => value
    failCallback ? failCallback : reason => { throw reason }
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
           let x = successCallback(this.value)
            // 判断x的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve
            // 如果是promise对象 查看promise对象返回的结果
            // 再根据promise对象返回的结果 决定调用resolve还是reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
           let x = failCallback(this.reason)
            // 判断x的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve
            // 如果是promise对象 查看promise对象返回的结果
            // 再根据promise对象返回的结果 决定调用resolve还是reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else {
        setTimeout(() => {
          try {
           let x = successCallback()
            // 判断x的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve
            // 如果是promise对象 查看promise对象返回的结果
            // 再根据promise对象返回的结果 决定调用resolve还是reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
             let x = successCallback(this.value)
              // 判断x的值是普通值还是promise对象
              // 如果是普通值 直接调用resolve
              // 如果是promise对象 查看promise对象返回的结果
              // 再根据promise对象返回的结果 决定调用resolve还是reject
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
             let x = failCallback(this.reason)
              // 判断x的值是普通值还是promise对象
              // 如果是普通值 直接调用resolve
              // 如果是promise对象 查看promise对象返回的结果
              // 再根据promise对象返 回的结果 决定调用resolve还是reject
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
           }
          }, 0)
        })
      }
    })
    return promise2
  }
  finally (callback) {
    return this.then(value => {
      return MyPromise.resolve(callback()).then(() => value)
    },reason => {
      return MyPromise.resolve(callback()).then(() => { trow reason })
    })
  }
  catch (failCallback) {
    return this.then(undefined, failCallback)
  }
  static all (array) {
    let result = []
    let index = 0
    return new MyPromise((resolve, reject) => {
      function addData (key, value) {
        result[key] = value
        index++
        if (index === array.length) {
          resolve(result)
        }
      }
      for (let i = 0; i< array.length; i++) {
        let current = array[i]
        if (current instanceof MyPromise) {
          // promise对象
          current.then(value => addData(i, value), reason => reject(reason))
        } else {
          // 普通值
          addData(i, array[i])
        }
      }
    })
  }
  static resolve (value) {
    if (value instanceof MyPromise) return value
    return new MyPromise(resolve => resolve(value))
  }
}
function resolvePromise (promise2, x, resolve, reject) {
  if (promise2 === x) {
  return reject(new TypeError('Chaning cycle detected for promise #<Promise>'))
}
  if (x instanceof MyPromise) {
    // promise对象
    // x.then(value => reslove(value), reason => reject(reason))
    x.then(reslove, reject)
  } else {
    // 普通值
    resolve(x)
  }
}
module.exporte = MyPromise
avatar
文章
阅读
粉丝