Promise代码

 Promise构造函数
      Promise状态 status pending  fulfilled rejected
      const PENDING = 'pending'
      const FULFILLED = 'fulfilled'
      const REJECTED = 'rejected'
      class Promise {
        //  实例属性
        status = PENDING
        result = undefined
        //  私有属性 this.#handlers = []
        #handles = []
        constructor(executor) {
          // console.log(executor)
          // console.log('构造函数执行了')
          const resolve = (result) => {
            if (this.status === PENDING) {
              this.status = FULFILLED
              this.result = result
              // 把之前存的函数依次取出来调用
              this.#handles.forEach(({ onFulfilled }) => {
                onFulfilled(this.result)
              })
            }
          }
          const reject = (result) => {
            if (this.status === PENDING) {
              this.status = REJECTED
              this.result = result
              // 把之前存的函数依次取出来调用
              this.#handles.forEach(({ onRejected }) => {
                onRejected(this.result)
              })
            }
          }
          executor(resolve, reject)
        }

        then(onFulfilled, onRejected) {
          onFulfilled =
            typeof onFulfilled === 'function' ? onFulfilled : (x) => x
          onRejected =
            typeof onRejected === 'function'
              ? onRejected
              : (x) => {
                  throw x
                }
          // 判断状态
          if (this.status === FULFILLED) {
            onFulfilled(this.result)
          } else if (this.status === REJECTED) {
            onRejected(this.result)
          } else {
            // 调用then的时候，状态是默认状态，把传入的两个函数存储起来
            // [{onFulfilled, onRejected},{OnFulfilled, onRejected}]
            this.#handles.push({
              onFulfilled,
              onRejected,
            })
          }
        }
      }

      /**/ console.log('start')
      const p = new Promise((resolve, reject) => {
        console.log(11)
        resolve('ok')
        //reject('出错了')
        // setTimeout(() => {
        //   console.log(123)
        // }, 1000)
        // setTimeout(() => {
        //   resolve('ok')
        // }, 1000)
      })

      // then可以调用多次
      p.then(
        (data) => {
          console.log(data)
        },
        (reason) => {
          console.log(reason)
        }
      )

      /*  p.then(
        (data) => {
          console.log(data)
        },
        (reason) => {
          console.log(reason)
        }
      ) */
      // console.log(p.status, p.result)
      //console.log(p.handles)
      console.log('end')

      // const p1 = new Promise((resolve, reject) => {
      //   //resolve(100)
      //   reject(123)
      // })
      //p1.then(30)

.手撕Promise-then变为异步

function runAsyncTask(callback) {

        // queueMicroTask() ->  MutationObserver  -> setTimeout()

        if (typeof queueMicrotask === 'function') {

          queueMicrotask(callback)

        } else if (typeof MutationObserver === 'function') {

          const mutationObserver = new MutationObserver(callback)

          const oDiv = document.createElement('div')

          mutationObserver.observe(oDiv, { childList: true })

          oDiv.innerText = 'longge666'

        } else {

          setTimeout(callback, 0)

        }

      }

      // Promise构造函数

      // Promise状态 status pending  fulfilled rejected

      const PENDING = 'pending'

      const FULFILLED = 'fulfilled'

      const REJECTED = 'rejected'

      class Promise {

        //  实例属性

        status = PENDING

        result = undefined

        //  私有属性 this.#handlers = []

        #handles = []

        constructor(executor) {

          // console.log(executor)

          // console.log('构造函数执行了')

          const resolve = (result) => {

            if (this.status === PENDING) {

              this.status = FULFILLED

              this.result = result

              // 把之前存的函数依次取出来调用

              this.#handles.forEach(({ onFulfilled }) => {

                onFulfilled()

              })

            }

          }

          const reject = (result) => {

            if (this.status === PENDING) {

              this.status = REJECTED

              this.result = result

              // 把之前存的函数依次取出来调用

              this.#handles.forEach(({ onRejected }) => {

                onRejected()

              })

            }

          }

          executor(resolve, reject)

        }

        then(onFulfilled, onRejected) {

          onFulfilled =

            typeof onFulfilled === 'function' ? onFulfilled : (x) => x

          onRejected =

            typeof onRejected === 'function'

              ? onRejected

              : (x) => {

                  throw x

                }

          // 判断状态

          if (this.status === FULFILLED) {

            runAsyncTask(() => {

              onFulfilled(this.result)

            })

          } else if (this.status === REJECTED) {

            runAsyncTask(() => {

              onRejected(this.result)

            })

          } else {

            // 调用then的时候，状态是默认状态，把传入的两个函数存储起来

            // [{onFulfilled, onRejected},{OnFulfilled, onRejected}]

            this.#handles.push({

              onFulfilled: () => {

                runAsyncTask(() => {

                  onFulfilled(this.result)

                })

              },

              onRejected: () => {

                runAsyncTask(() => {

                  onRejected(this.result)

                })

              },

            })

          }

        }

      }

      /**/ console.log('start')

      const p = new Promise((resolve, reject) => {

        console.log(11)

        ///resolve('ok')

        //reject('出错了')

        // setTimeout(() => {

        //   console.log(123)

        // }, 1000)

        setTimeout(() => {

          resolve('ok')

        }, 1000)

      })

      // then可以调用多次

      p.then(

        (data) => {

          console.log(data)

        },

        (reason) => {

          console.log(reason)

        }

      )

      console.log('end')