手撕代码之Promise的实现(附源码)

手撕代码之Promise的实现(附源码)

技术杂谈小彩虹2021-08-18 14:42:00180A+A-

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

1、promise 基本结构

1.1 状态

我们都知道promise 有三种状态

  • Pending
  • Resolved
  • Rejected

并且promise 的状态是不可逆

1.2 参数

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

  • resolved 成功状态
  • rejected 失败状态

1.3 方法

在这里插入图片描述 通过查看 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 })
     })
 }

我将源码放到了公众号,关注公众号“聪明可爱小轩轩”,回复promise 领取。

码字不易,如果感觉还不错,点个赞,加个关注呗!!!

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们