Promise的实现 简单实现resolve、reject和then方法（一）

目录

Promise的实现 简单实现resolve、reject和then方法（一）

1.定义执行器函数

2.定义原始数据

3.定义resolve和reject方法

4.测试

---

Promise的实现 简单实现resolve、reject和then方法（一）

1.定义执行器函数

function Promise(excutor) {
    // 立即同步执行excutor
    try {
      excutor(resolve, reject)
    } catch (error) {
      //如果执行器抛出异常，promise对象变为失败
      reject(error)
    }
  }

如果抛出了错误，要捕获错误

2.定义原始数据

function Promise(excutor) {
    // 将当前promise对象保存起来
    const self = this
    this.status = 'pending' //给promise对象指定status属性，初始值为pending
    this.data = undefined //给promise对象指定一个用于存储结果数据的属性
    this.callbacks = [] //每个元素的结构：{onResolved(){},onRejected(){}}

    // 立即同步执行excutor
    try {
      excutor(resolve, reject)
    } catch (error) {
      //如果执行器抛出异常，promise对象变为失败
      reject(error)
    }
  }

将promise保存在self中 保存this的指向

定义原始状态status

data存储数据

callbacks存储传过来的回调函数

3.定义resolve和reject方法

function Promise(excutor) {
    // 将当前promise对象保存起来
    const self = this
    this.status = 'pending' //给promise对象指定status属性，初始值为pending
    this.data = undefined //给promise对象指定一个用于存储结果数据的属性
    this.callbacks = [] //每个元素的结构：{onResolved(){},onRejected(){}}

    function resolve(value) {
      // console.log('self', self)
      //这里的this是指向window的
      // console.log('this', this)
      //如果当前状态不是pending，直接结束
      if (self.status !== 'pending') return
      // 将状态改为resolved
      self.status = 'resolved'
      //保存value数据
      self.data = value
      //如果有待执行的callback函数,立即异步执行回调函数onResolved
      console.log('callbacks', self.callbacks)
      if (self.callbacks.length > 0) {
        //放入队列中执行所有成功的回调
        setTimeout(() => {
          self.callbacks.forEach((callbacksObj) => {
            callbacksObj.onResolved(value)
          })
        })
      }
    }

    function reject(reason) {
      //如果当前状态不是pending，直接结束
      if (self.status !== 'pending') return
      // 将状态改为resolved
      self.status = 'rejected'
      //保存value数据
      self.data = reason
      //如果有待执行的callback函数,立即异步执行回调函数onRejected
      console.log('callbacks', self.callbacks)

      if (self.callbacks.length > 0) {
        //放入队列中执行所有失败的回调
        setTimeout(() => {
          self.callbacks.forEach((callbacksObj) => {
            callbacksObj.onRejected(reason)
          })
        })
      }
    }
    // 立即同步执行excutor
    try {
      excutor(resolve, reject)
    } catch (error) {
      //如果执行器抛出异常，promise对象变为失败
      reject(error)
    }
  }

只可以由pending状态变成resolved或rejected状态，需要将Promise对象用self保存下来，否则resolve和reject函数中的this指向的是window，如果有待执行的callback函数,立即异步执行回调函数

4.测试

      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          // resolve(1)
          reject(2)
          console.log('reject()改变状态之后')
        }, 100)
      })
      p.then(
        (value) => {
          console.log('变量 ~ value1', value)
        },
        (reason) => {
          console.log('变量 ~ reason1', reason)
        }
      )
      p.then(
        (value) => {
          console.log('变量 ~ value2', value)
        },
        (reason) => {
          console.log('变量 ~ reason2', reason)
        }
      )

输出：