Promise then方法的链式调用

2021-12-13  本文已影响0人  湘兰沅芷

返回的是非promise对象

const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected'// 失败
class MyPromise {
  constructor(executor) {
    executor(this.resolve, this.reject)
  }
  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []
  resolve = value => {
    if (this.status !== PENDING) return
    // 将状态修改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
    // this.successCallback && this.successCallback(this.value)
    while(this.successCallback.length) {
      this.successCallback.shift()(this.value)
    }
  }
  reject = reason => {
    if (this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // this.failCallback && this.failCallback(this.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)
        resolve(x)
      } else if (this.status === REJECTED) {
        failCallback(this.reason)
      } else {
        // 等待
        // 讲成功回调和失败回调进行存储
        this.successCallback.push(successCallback)
        this.failCallback.push(failCallback)
      }
    })
    return promise2 // 返回promise对象
  }
}

module.exports = MyPromise

优化:可能返回promise对象和非promise对象

const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  // setTimeout(() => {
  //   resolve('成功')
  // }, 2000)
  resolve('成功')
  // reject('失败')
})
function other () {
  return new MyPromise((resolve, reject) => {
    resolve('other')
    // reject('no')
  })
}
promise.then(value => {
  console.log(value);
  return other()
}, reason => {
  console.log('no1')
}).then(value => {
  console.log('yes');
}, reason => {
  console.log('no2')
})
// 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)
  }
  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []
  resolve = value => {
    if (this.status !== PENDING) return
    // 将状态修改为成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
    // this.successCallback && this.successCallback(this.value)
    while(this.successCallback.length) {
      this.successCallback.shift()(this.value)
    }
  }
  reject = reason => {
    if (this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // this.failCallback && this.failCallback(this.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)
        // resolve(x)
        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) {
    // x.then(value => resolve(value), reason => reject(reason))
    x.then(resolve, reject)
  } else {
    resolve(x)
  }
}

module.exports = MyPromise
上一篇下一篇

猜你喜欢

热点阅读