手写promise骨架

var p1 = new Promise((resolve, reject) => {
  resolve(1)
})
p1.then((val) => {
  console.log(val)
}, (reason) => {
  console.log(reason)
})
p1.then(2)
// 通过onfulfulled里面的return的值,修改promise
// x是promise,resolve的值,rejected的reason或者then里面的fulFilled方法执行返回的值
function resolvePromise(promise, x) {
  // x===promise的时候,报错
  // x是promise类型则通过x的状态和值去修改promise的状态和值
  if (isPromise(x)) {
    if (x.status === statusMap.FULFILLED) {

    }
    if (x.status === statusMap.REJECTED) {

    }
    if (x.status === statusMap.PENDING) {

    }
  }

  if (isObject(x) || isFunction(x)) {
    // x是thenable,当作promise去执行
    // 不是thenable,就,当成普通数据类型
  } else {
    //普通数据类型
    fulFilledPromise(promise, x)
  }
}
function fulFilledPromise(promise, value) {
  promise.status = statusMap.FULFILLED
  promise.value = value
}
function rejectPromise(promise, error) {
  promise.status = statusMap.REJECTED
  promise.reason = error
}
function isFunction() {

}
function isPromise() {

}
const statusMap = {
  PENDING: 'pending',
  FULFILLED: 'fulfilled',
  REJECTED: 'rejected'
}
class Promise {
  constructor(fn) {
    this.status = 'pending'
    this.value = undefined
    this.reason = undefined
    this.fulfilledCbs = [] // 当前promise调用then,then里面的onFulfilled
    this.rejectedCbs = [] // 当前promise调用then,then里面的onRjected
    fn((value) => {
      resolvePromise(this, value)
    }, (reason) => {
      rejectPromise(this, reason)
    })
  }

  then(onFulfilled, onRejected) {
    const promise1 = this
    const promise2 = new Promise(() => { })
    if (promise1.status === statusMap.FULFILLED) {
      setTimeout(() => {
        if (!isFunction(onFulfilled)) {
          return promise1
        }
        try {
          const x = onFulfilled(promise1.value)
          resolvePromise(promise2, x)
        } catch (error) {
          rejectPromise(promise2, error)
        }
      }, 0);
    }

    if (promise1.status === statusMap.REJECTED) {
      setTimeout(() => {
        if (!isFunction(onRejected)) {
          return promise1
        }
        try {
          const x = onRejected(promise1.reason)
          resolvePromise(promise2, x)
        } catch (error) {
          rejectPromise(promise2, error)
        }
      }, 0);
    }
    if (promise1.status === statusMap.PENDING) {
      onFulfilled = isFunction(onFulfilled) ? onFulfilled : (value) => {
        return value;
      }
      onRejected = isFunction(onRejected) ? onRejected : (error) => {
        throw error;
      }
      promise1.fulfilledCbs.push(() => {
        setTimeout(() => {
          try {
            const x = onFulfilled(promise1.value)
            resolvePromise(promise2, x)
          } catch (error) {
            rejectPromise(promise2, error)
          }
        }, 0);
      })
      promise1.rejectedCbs.push(() => {
        setTimeout(() => {
          try {
            const x = onRejected(promise1.value)
            resolvePromise(promise2, x)
          } catch (error) {
            rejectPromise(promise2, error)
          }
        }, 0);
      })
    }

    return promise2
  }
}

 

你可能感兴趣的:(js前台知识,js)