手撕代码之Promise的实现

前端小tips

发布于 2021-12-06 13:44:33

4480

发布于 2021-12-06 13:44:33

文章被收录于专栏：前端文章小tips

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

1、promise 基本结构

1.1 状态

我们都知道promise 有三种状态

Pending
Resolved
Rejected

并且promise 的状态是 不可逆 的

1.2 参数

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

resolved 成功状态
rejected 失败状态

1.3 方法

20210110170550885.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)
      }
}

2、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

2.1 promise中支持异步

也就是说，异步情况下，执行then的时候，状态依旧是pending，又因为，我们会有如下的调用情况

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 同理
}

2.2 then 函数返回新的promise

为了达成链式，我们需要在hen里返回一个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+规范写的。也就不需要仔细说了。

这个时候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
}

自此，我们的then方法写完。

3、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))
}

4、all(),race() 方法

4.1 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)
             }
         }
     })
 }

4.2 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)
              })
          }
      })
  }

5、catch() 方法

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

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

6、finally 方法

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

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

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript