JS的ES6中Promise的简单实现

1. 认识什么是Promise

Promise是ES6中新增的一个内置类，在通过new常见Promise时，需要传入一个回调函数，称之为executor

当调用resolve回调函数，会执行Promise对象的then方法传入的回调函数；

当调用reject回调函数，会执行Promise对象的catch方法传入的回调函数；

2. Promise的三种状态

Promise的注意事项：

①promise状态一旦确定，就不可更改

②同一个Promise可以被多次调用then方法

// Promise有哪些对象方法
// console.log(Object.getOwnPropertyDescriptors(Promise.prototype))

const promise = new Promise((resolve, reject) => {
  resolve("hahaha")
})

// 1.同一个Promise可以被多次调用then方法
// 当我们的resolve方法被回调时, 所有的then方法传入的回调函数都会被调用
promise.then(res => {
  console.log("res1:", res)
})

promise.then(res => {
  console.log("res2:", res)
})

promise.then(res => {
  console.log("res3:", res)
})

③then方法传入的“回调函数”可以有返回值

返回的是Promise

返回的是一个对象，并且实现了thenable

const promise = new Promise((resolve, reject) => {
  resolve("hahaha")
})

// 2.then方法传入的 "回调函数: 可以有返回值
// then方法本身也是有返回值的, 它的返回值是Promise

// 1> 如果我们返回的是一个普通值(数值/字符串/普通对象/undefined), 那么这个普通的值被作为一个新的Promise的resolve值
promise.then(res => {
  return "aaaaaa"
}).then(res => {
  console.log("res:", res)
  return "bbbbbb"
})

// 2> 如果我们返回的是一个Promise
promise.then(res => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(111111)
    }, 3000)
  })
}).then(res => {
  console.log("res:", res)
})

// 3> 如果返回的是一个对象, 并且该对象实现了thenable
promise.then(res => {
  return {
    then: function(resolve, reject) {
      resolve(222222)
    }
  }
}).then(res => {
  console.log("res:", res)
})

④通过catch方法来传入错误（拒绝）捕获的回调函数

默认优先捕获promise的异常，当then里面返回promise对象里面有异常或者reject时再捕获；

const promise = new Promise((resolve, reject) => {
  resolve()
  // reject("rejected status")
  // throw new Error("rejected status")
})

// 1.当executor抛出异常时, 也是会调用错误(拒绝)捕获的回调函数的
promise.then(undefined, err => {
  console.log("err:", err)
  console.log("----------")
})

// 2.通过catch方法来传入错误(拒绝)捕获的回调函数
// promise/a+规范
promise.catch(err => {
  console.log("err:", err)
})
promise.then(res => {
  // return new Promise((resolve, reject) => {
  //   reject("then rejected status")
  // })
  throw new Error("error message")
}).catch(err => {
  console.log("err:", err)
})

3. Promise对象方法-finally

const promise = new Promise((resolve, reject) => {
  // resolve("resolve message")
  reject("reject message")
})

promise.then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
}).finally(() => {
  console.log("finally code execute")
})

4. Promise类方法-resolve

// 2.传入Promise
const promise = Promise.resolve(new Promise((resolve, reject) => {
  resolve("11111")
}))

promise.then(res => {
  console.log("res:", res)
})

5. Promise类方法-reject

// 注意: 无论传入什么值都是一样的  对传入的直接输出 不错转换成promise处理
const promise = Promise.reject(new Promise(() => {}))

promise.then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
})

对Promise的简单实现：

const PROMISE_STATUS_FULFILLED = 'fulfilled'
const PROMISE_STATUS_REJECTED = 'rejected'
const PROMISE_STATUS_PENDING = 'pending'

class HGFPromise {
  constructor(executor) {
    this.status = PROMISE_STATUS_PENDING
    this.value = undefined
    this.reason = undefined

    const resolve = (value) => {
      if(this.status === PROMISE_STATUS_PENDING) {
        this.status = PROMISE_STATUS_FULFILLED
        queueMicrotask(() => {
          this.value = value
          this.onFulfilled(value)
        })
      }
    }
    const reject = (reason) => {
      if(this.status === PROMISE_STATUS_PENDING) {
        this.status = PROMISE_STATUS_REJECTED
        queueMicrotask(() => {
          this.reason = reason
          this.onRejected(reason)
        })
      }
    }
    executor(resolve, reject)
  }

  // then方法
  then(onFulfilled, onRejected) {
    this.onFulfilled = onFulfilled
    this.onRejected = onRejected
  }
}

const promise = new HGFPromise((resolve, reject) => {
  console.log(1111)
  resolve("resolve")
  reject("reject")
})

promise.then(res => {
  console.log(res);
}, err => {
  console.log(err);
})

 运行结果：