Promise的实现

2021-07-28 本文已影响0人我写的代码绝对没有问题

ES6已经普及很多年了，也早已过了callback时代。公司的要求也不再是停留在promise的使用上了。本文就带大家一起从零开始写自己的 Promise,剖析其内在原理。

promise基本结构

我们都知道promise 有三种状态

Pending
Resolved
Rejected

并且promise 的状态是不可逆的

每一个 Promise 都有两个函数参数，分别是

resolved 成功状态
rejected 失败状态

image.png

通过查看 Promise 我们可以发现 resolve，reject，all，race是静态方法，then，catch，finally是实例方法。

通过以上的分析，我们 Promise 基本结构已经明朗了

const PENDING = 'PENDING'
const RESOLVED = 'RESOLVED'
const REJECTED = 'REJECTED'


class Promise {
    constructor(executor) {
        this.status = PENDING
        let resolve = () => {
        }
        let = reject = () => {
        }
        executor(resolve,reject)
    }
    then () {
    }
    catch () {
    }
    finally () {
    }


    static resolve () {
    }
    static reject () {
    }
    static all () {
    }
    static race() {
    }
}

我们 new 一个promise的时候都是直接执行，这个执行的函数就是 executor。而他有两个函数参数，分别是resolve，reject。而又因为我们状态是不可逆的，所以只能是在PENDING 状态下执行。

对于promise 而言，throw也应该被监听到（reject），所以我们需要在执行 executor的时候，加一个 try catch。

所以我们将constructor 里面的代码做了如下的改变

constructor(executor) {
     this.status = PENDING   // 默认是pending状态
     this.value = undefined
     this.reason = undefined
     let resolve = (value) => {
          if (this.status === PENDING) {
              this.value = value
              this.status === RESOLVED
          }
      }
      let = reject = (reason) => {
          if (this.status === PENDING) {
              this.reason = reason
              this.status === REJECTED
          }
      }
      try {
          executor(resolve,reject)
      } catch(e) {
          reject(this.reason)
      }
}

then方法

then方法会接收两个方法，onfulfilled, onrejected。而当status状态被改变后，onfulfilled, onrejected才应该被执行。同时onfulfilled,onrejected 是可选参数

then (onfulfilled,onrejected) {
    onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : val => val
      onrejected =  typeof onrejected === 'function' ? onrejected : err => { throw err }
      // 成功
      if (this.status === RESOLVED) {
          onfulfilled(this.value) 
      }
      // 失败
      if (this.status === REJECTED) {
          onrejected(this.reason)
      }
  }

这个时候我们的promise已经完成了一班。我们可以执行promise函数，可以调用他的then方法，并且在then中也可以拿到他的值。非常完美。

但是这远远不够，接下来就让我们思考一下then的特性，让我们一起完善他！！！

promise中支持异步
我们每一次调用promise都会返回一个新的promise

promise中支持异步

也就是说，异步情况下，执行then的时候，状态依旧是pending，

同时，promise会有如下的调用情况

let p= new Promise(resolve => {
  setTimeout(() => {
    resolve()
  },1000)
})
p.then((data) => { console.log(data)})
p.then((data) => { console.log(data)})
p.then((data) => { console.log(data)})

所以，异步情况下，我们需要一个数组，来存储我们的执行函数（订阅）

if (this.status === PENDING) {
    // 订阅
   this.onResolvedCallbacks.push(() => {
       setTimeout(() => {
           try {
                // todo...
               let x = onfulfilled(this.value)
               resolvePromise(promise2,x,resolve,reject)
           } catch(e) {
               reject(e)
           }
       }, 0);
    })
    this.onRejectedCallbacks.push(() => {
       setTimeout(() => {
          try {
              // todo...
              let x = onrejected(this.reason)
              resolvePromise(promise2,x,resolve,reject)
          } catch(e) {
              reject(e)
          }
       }, 0);
    })
}

异步时间到了之后，我们就需呀继续这个数组（发布）


constructor {
  // 成功/失败 回调数组
    this.onResolvedCallbacks = []
     this.onRejectedCallbacks = []
  // 成功函数
    let resolve = (value) => {
        if (this.status === PENDING) {
            this.value = value
            this.status = RESOLVED
            // 发布
            this.onResolvedCallbacks.forEach(fn => fn())
        }
    }
    // reject 同理

then 函数返回新的promise

为了达成链式，我们需要在then里返回一个promise。类似于递归。

then() {
  let promise2 = new Promise((resolve,reject) => {
    // code...
  }
  return promise2
}

同时呢，我们的then还有这样一个特性。遇到非promise类型的时候是直接resolve返回的，遇到promise类型的，会进行判断。因为我们的then的四个运行地方都会用到这个函数。我们将其提取出来。

/**
 * promise2 与 x 不可相同
 * @param {*} promise2 
 * @param {*} x 
 * @param {*} resolve 
 * @param {*} reject 
 */
const resolvePromise =  (promise2, x, resolve, reject) => {
    if(promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (typeof x === 'object' && x !== null || typeof x === 'function') {
        let called;
        try {
            let then = x.then
            if (typeof then === 'function') {
                then.call(x, y => {
                    if (called) { return }
                    called = true
                    resolvePromise(promise2, y, resolve, reject)
                }, r => {
                    if (called) { return }
                    called = true
                    reject(r)
                })
            } else {
                // {then: 1}
                resolve(x)
            }
        } catch(e) {
            if (called) { return }
            called = true
            reject(e)
        }
    } else {
        resolve(x)
    }
}

这一块的代码是按照 Promise/A+ (https://promisesaplus.com/z)规范写的。也就不需要仔细说了

这个时候then函数变成了如下的状态


then() {
  let promise2 = new Promise((resolve,reject) => {
    // 成功
        if (this.status === RESOLVED) {
            let x =onfulfilled(this.value) 
            resolvePromise(promise2,x,resolve,reject) 
        }
    // code...
  }
  return promise2
}

聪明的你肯定发现了promise2本生就是一个异步的，我们调用resolvePromise(promise2,x,resolve,reject) 时，promise2为空。那么我们也将其变成异步即可。同时为了防止这一步有错，加一个try catch

then() {
  let promise2 = new Promise((resolve,reject) => {
    // 成功
        if (this.status === RESOLVED) {
            setTimeout(() => {
                try {
                    let x =onfulfilled(this.value) 
                    resolvePromise(promise2,x,resolve,reject)
                } catch(e) {
                    reject(e)
                }
            },0)
        }
    // code...
  }
  return promise2
}

resolve,reject 方法

我们的resolve，reject会将传入的值，返回一个新的promise

static resolve(value) {
       return new Promise(resolve => resolve(value))
    }
static reject (reason) {
    return new Promise(reject => reject(reason))
}

但是如果传入的值本身就是promise类型的，那么直接返回即可。


static resolve(value) {
    if (value instanceof Promise) return value
    return new Promise(resolve => resolve(value))
}
static reject (reason) {
   if (reason instanceof Promise) return reason
   return new Promise(reject => reject(reason))
}

all，race 方法

all()

所有的传入一个数组，每个都正常返回，即返回resolve，反之reject。同时因为数组中存在异步执行的情况，我们需要写一个promiseAdd函数来计算当前promise完成进度。

static all (values) {
     return new Promise((resolve,reject) => {
         const arr = []
         let index = 0 // 解决多个异步的并发问题，要使用计数器
         function promiseAdd(key,value) {
             arr[key] = value
             if (++index === values.length) {
                 resolve(arr)
             }
         }
         for(let i = 0 ;i < values.length;i++) {
             let current = values[i]
             if (reason instanceof Promise) {
                 current.then((data) => {
                     promiseAdd(i,data)
                 },reject)
             } else {
                 promiseAdd(i,current)
             }
         }
     })
 }

race()

只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变

static race(values) {
      return new Promise((resolve, reject) => {
          for (let value of values) {
              this.resolve(value).then(res => {
                  resolve(res)
                  }, err => {
                  reject(err)
              })
          }
      })
  }

catch方法

catch就相当于调用了then方法，走的是onrejected状态

catch(onrejected) {
     return this.this.then(undefined, onrejected)
}

finally 方法

无论成功还是失败，均会执行。同时 finally() 并不是结束，他依旧可以返回一个promise

finally(cb) {
     return this.then(data => {
         return Promise.resolve(cb()).then(() => data)
     },err => {
         return Promise.resolve(cb()).then(() => { throw err })
     })
 }