手写Promise源码

怼烎@ 2022-11-18 04:54 231阅读 0赞

# 一、编写一个基础版本的promise #

class Promises {
      constructor(fn) {
        fn(this.resolve, this.reject)
      }
      status = 'pending'
      value = undefined
      err = undefined
      successCb = undefined
      failCb = undefined
      resolve = value => {
        if (this.status !== 'pending') {
          return
        }
        this.status = 'fulfilled'
        this.value = value
        this.successCb && this.successCb(value)
      }
      reject = err => {
        if (this.status !== 'pending') {
          return
        }
        this.status = 'rejected'
        this.err = err
        this.failCb && this.failCb(err)
      }
      then(successCb, failCb) {
        if (this.status === 'fulfilled') {
          successCb(this.value)
        } else if (this.status === 'rejected') {
          failCb(this.err)
        } else {
          this.successCb = successCb
          this.failCb = failCb
        }
      }
    }
    let promise = new Promises((resolve, reject) => {
      resolve('成功')
      reject('失败')
    })
    promise.then(v => {
      console.log(v)
    }, e => {
      console.log(e)
    })

# 二、编写步骤分解介绍 #

\* 1.Promise 就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行

\* 2.Promise中有三种状态：成功fulfilled  失败rejected 等待pending

\*    pending -> fulfilled   调用：resolve

\*    pending -> rejected    调用：reject

\*    一旦状态确定就不可更改

\* 3. then方法内部做的事就是判断状态，如果成功，调用成功的回调函数，如果失败，调用失败的回调函数，then方法被定义在原型对象中的

\* 4. then成功回调有一个参数，表示成功之后的值，then失败回调有一个参数，表示失败后的原因

\* 5. 去保存回调函数，在实现promise中的异步处理，在处理完调用回调

\* 6. 实现then方法多次调用

\* 7. 实现then方法的链式调用

\* 8. 处理then方法中Promise对象自返回

\* 9. 增加异常捕获及then方法中执行发生异常抛出

\* 10.将then方法的参数变成可选参数

\* 11.promise中的all方法

\* 12.promise中的resolve方法

\* 13.promise中的reject方法

\* 14.promise中的finally方法

\*    无论当前promise的状态是成功的还是失败的，finally方法中的回调函数始终都会被执行一次

\*    在finally方法的后面我们可以链式调用then方法来拿到当前这个promise对象最终返回的结果

\* 15.promise中的catch方法

# 三、完整版本promise代码及注释 #

// 定义状态，因为要频繁的使用，所以定义成常量，在使用常量，编辑器是有提示
    const PENDING = 'pending'
    const FULFILLED = 'fulfilled'
    const REJECTED = 'rejected'
    
    class MyPromise {
      constructor (fn) { // 接收一个执行器，立即执行，也就是new promise传入的函数
        try { // 捕获执行器中的异常错误
          fn(this.resolve, this.reject)
        } catch (e) {
          this.reject(e)
        }
      }
      // 在使用promise是resolve和reject是直接调用的，如果是一个普通函数this是window或undefined，所以将resolve定义为箭头函数，就是使里面的this指向的是这个类的实例对象
      status = PENDING // promise状态，默认：pending
      // 将成功和失败后的值定义成实例属性
      value = undefined // 定义成功后的值
      reason = undefined // 定义失败后的值
      successCb = [] // 成功回调
      failCb = [] // 失败回调
      resolve = value => { // 定义resolve，更改状态fulfilled
        // 如果状态不是等待，阻止程序向下执行
        if (this.status !== PENDING) return
        // 将状态更改为成功
        this.status = FULFILLED
        // 因为要在then方法中使用，所以要保存成功之后的值
        this.value = value
        // 判断成功回调是否存在，如果存在就调用
        // this.successCb && this.successCb(this.value)
        // 数组shift方法会删除原数组第一个元素，它的返回值就是一个元素，所以直接调用，直到successCb数组中为空
        while(this.successCb.length) this.successCb.shift()()
        
      }
      reject = reason => { // 定义reject，更改状态rejected
        // 如果状态不是等待，阻止程序向下执行
        if (this.status !== PENDING) return
        // 将状态更改为失败
        this.status = REJECTED
        // 保存失败之后的原因
        this.reason = reason
        // 判断失败回调是否存在，如果存在就调用
        // this.failCb && this.failCb(this.reason)
        // 数组shift方法会删除原数组第一个元素，它的返回值就是一个元素，所以直接调用，直到failCb数组中为空
        while(this.failCb.length) this.failCb.shift()()
      }
      // 在原型上挂then方法
      then (successCb, failCb) {
        // 实现链式调用，返回一个新的promise
        successCb = successCb ? successCb : value => value // 将then方法的参数变成可选参数, 如果有就使用传递的，没有就去返回一个 value => value
        failCb = failCb ? failCb : reason => { throw reason } // 处理失败回调
        let promsie2 = new MyPromise((resolve, reject) => {
          // 判断状态
          if (this.status === FULFILLED) {
            setTimeout(() => { // 将这儿变成异步代码，这样才可以拿到promise2
              // then方法中执行发生异常抛出
              try {
                let x = successCb(this.value)
                handleResolve(x, promsie2, resolve, reject)
              } catch (e) {
                reject(e) // 如果发生错误就传递到下一个promise中的rejected
              }
            }, 0)
          } else if (this.status === REJECTED) {
            setTimeout(() => { 
              try {
                let x = failCb(this.reason)
                handleResolve(x, promsie2, resolve, reject)
              } catch (e) {
                reject(e)
              }
            }, 0)
          } else {
            // 等待（处理异步）
            // 将成功和失败回调存储起来
            this.successCb.push(() => {
              setTimeout(() => {
                try {
                  let x = successCb(this.value)
                  handleResolve(x, promsie2, resolve, reject)
                } catch (e) {
                  reject(e)
                }
              }, 0)
            })
            this.failCb.push(() => {
              setTimeout(() => {
                try {
                  let x = failCb(this.reason)
                  handleResolve(x, promsie2, resolve, reject)
                } catch (e) {
                  reject(e)
                }
              }, 0)
            })
          }
        })
        return promsie2
      }
      // 定义静态all方法
      static all (array) {
        let result = [] // 定义返回的结果数组
        let index = 0 // 用来控制是否执行完成，涉及一些异步处理
    
        /**
         * 判断数组中事普通值还是promise对象
         * if是普通值直接放入结果数组当中
         * if是promise对象就去执行，然后再将promise中的结果放入result中
         */
        return new MyPromise((resolve, reject) => {
          // 用来添加结果的函数
          function addData (key, value) {
            result[key] = value
            // 等待异步处理全部完成resolve
            index++
            if (index === array.length) {
              resolve(result) // 将处理完的结果返回
            }
          }
          for (let i = 0; i < array.length; i++) {
            let current = array[i]
            if (current instanceof MyPromise) {
              // promise对象
              current.then(value => addData(i, value), reason => {
                reject(reason)
              })
            } else {
              // 普通值,添加结果
              addData(i, current)
            }
          }
        })
      }
      // 定义race方法
      static race(promises) {
        return new MyPromise((resolve, reject) => {
          if (promises.length === 0) {
            return
          } else {
            for (let p of promises) {
              MyPromise.resolve(p).then(value => {
                resolve(value)
              }, reason => {
                reject(reason)
              })
            }   
          }
        })
      }
      /**
       * 定义resolve方法
       * 判断传入的参数是否是promise对象，直接返回该promise
       * 如果不是promise对象，就去创建一个promise对象，把给定的值包裹在promise对象当中，然后将这个promise返回
       */
      static resolve (value) {
        if (value instanceof MyPromise) return value // 如果是promise直接返回
        // 如果是一个值
        return new MyPromise(resolve =>  resolve(value)) // 用promise包裹
      }
      // 定义reject方法
      static reject (value) {
        if (value instanceof MyPromise) return value // 如果是promise直接返回
        // 如果是一个值
        return new MyPromise((resolve, reject) =>  reject(value)) // 用promise包裹
      }
      /**
       * 定义finally方法
       * 首先finall方法不是一个静态方法，这个方法是要被定义在promise类的原型对象上
       * 
       */
      finally (callback) {
        // 得到当前promise的状态
        return this.then(value => {
          // 这个要处理异步执行
          return MyPromise.resolve(callback()).then(() => value)
          /**
           * 这种写法未处理异步执行
           * callback()
           * return value // 只有return后下一个then方法才可以拿到这个value
           */
        }, reason => {
          return MyPromise.resolve(callback()).then(() => {throw reason})
          // callback()
          // throw reason // 如果失败了，将reason传递下去
        })
      }
      // 定义catch方法
      catch (failCb) {
        return this.then(undefined, failCb)
      }
    }

封装then返回数据判断函数

/**
    * 判断x的值是普通值还是promise对象
    * if普通值，直接调用resolve
    * if是promise对象，查看promise对象返回的结果
    * 再根据promise对象返回的结果，决定调用resolve还是调用reject
    * 定义一个函数用来做这些事handleResolve
    * 如果x返回的promise和promise相等时，就产生了promise自调用
    */
    function handleResolve (x, promsie2, resolve, reject) {
      if (x === promsie2) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
      }
      if (x instanceof MyPromise) {
        // promise 对象
        x.then(resolve, reject)
      } else {
        // 普通值
        resolve(x)
      }
    }