大前端进击之路(番外篇)手写Promise

最新推荐文章于 2022-12-29 09:14:41 发布

跟兔虫

最新推荐文章于 2022-12-29 09:14:41 发布

阅读量574

点赞数 6

分类专栏：大前端进击之路文章标签：前端 javascript es6 node.js

本文链接：https://blog.csdn.net/Cjk0620/article/details/112211143

版权

大前端进击之路专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

打工人！打工魂！前端才是人上人！此系列总结于大前端进击之路过程中的学习，如果文章中有不对的地方，希望大家能进行批评改正，互相进步。转载请注明出处。

手撕Promise源码

我们在上一篇大前端进击之路(二)JS异步编程中介绍了Promise，我们不仅要会使用它，也要了解它内部是怎样实现的，让我们的小脑呆瓜子清醒清醒，跟得上我的脚步嘛！

1.Promise核心逻辑分析及实现

我们首先要知道Promise就是一个类，我们用到这个类的时候，需要传递一个执行器，执行器会立即执行。
Promise中有三种状态，等待pending ; 成功 fuilfilled ; 失败 rejected。一开始的状态是pending，等待状态可以转化为成功或失败。这个状态一旦确定就不可更改。
promise中有resolve和reject两个函数，作用是将更改promise的状态。resolve是将状态改为fulfilled，reject是将状态改为rejected。
promise的原型对象上有一个then方法，作用是判断状态，如果状态是成功的，调用成功回调函数；如果状态是失败的，则调用失败回调函数。
then方法接收两个函数作为参数，一个成功时执行的成功回调函数，一个是失败时执行的失败回调函数，这两个函数的参数是由promise的resolve和reject分别传递进来的。

// myPromise.js
// 定义成常量是为了复用且代码有提示
const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败
// 定义一个构造函数
class MyPromise {
  constructor (executor) {
    // executor是一个执行器，进入会立即执行，并传入resolve和reject方法
    executor(this.resolve, this.reject)
  }

  // 实例对象的一个属性，初始为等待
  status = PENDING
  // 成功之后的值
  value = undefined
  // 失败之后的原因
  reason = undefined

  // resolve和reject为什么要用箭头函数？
  // 如果直接调用的话，普通函数this指向的是window或者undefined
  // 用箭头函数就可以让this指向当前实例对象
  resolve = value => {
    // 判断状态是不是等待，阻止程序向下执行
    if(this.status !== PENDING) return
    // 将状态改成成功
    this.status = FULFILLED
    // 保存成功之后的值
    this.value = value
  }
  reject = reason => {
    if(this.status !== PENDING) return
    // 将状态改为失败
    this.status = REJECTED
    // 保存失败之后的原因
    this.reason = reason
  }
  then (successCallback, failCallback) {
    //判断状态
    if(this.status === FULFILLED) {
      // 调用成功回调，并且把值返回
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      // 调用失败回调，并且把原因返回
      failCallback(this.reason)
    }
  }
}

module.exports = MyPromise

这样我们就是实现了一个简易版的Promise，我们来测试一下下！

//promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
   resolve('success')
   reject('err')
 })

 promise.then(value => {
   console.log('resolve', value)
 }, reason => {
   console.log('reject', reason)
 })
// 打印 resolve success

经过测试我们上面的代码是可以正常执行的，但是我们平时使用Promise多用于异步处理请求等，我们用setTimeout来模拟一下异步的情况。

//promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  // 我们期待的效果是延迟2秒后执行成功的回调并且将参数打印
  // 但是结果是什么也没有给我们返回
  // 这是因为主线程代码会立即执行，setTimeout是异步代码，then也会马上执行
  // 这个时候判断promise状态，状态是pending，所以then里面的回调函数都不会被执行
  setTimeout(() => {
    resolve('success')
  }, 2000); 
 })

 promise.then(value => {
   console.log('resolve', value)
 }, reason => {
   console.log('reject', reason)
 })

我们为了能够处理这种异步的处理，需要对我们的Promise进行改造

// myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  constructor (exector) {
    exector(this.resolve, this.reject)
  }
  status = PENDING
  value = undefined
  reason = undefined
  // 定义一个成功回调参数
  successCallback = undefined
  // 定义一个失败回调参数
  failCallback = undefined

  resolve = value => {
    if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    // 判断成功回调是否存在，如果存在就调用
    this.successCallback && this.successCallback(this.value)
  }

  reject = reason => {
    if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // 判断失败回调是否存在，如果存在就调用
    this.failCallback && this.failCallback(this.reason)
  }

  then (successCallback, failCallback) {
    if(this.status === FULFILLED) {
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      failCallback(this.reason)
    } else {
      // 等待
      // 因为并不知道状态，所以将成功回调和失败回调存储起来
      // 等到执行成功失败函数的时候再传递
      this.successCallback = successCallback
      this.failCallback = failCallback
    }
  }
}
module.exports = MyPromise

大体思路就是我们执行then的时候增加pending状态判断，将我们的成功和失败回调函数先存起来，等到resolve或reject执行的时候，我们会判断是否存在成功或失败的回调函数，如果存在就执行。现在我们再来执行promise.js，是不是能够延时2s打印输出啦~

是不是感觉自己好牛皮Promise都实现了成就感爆棚！先别急让我们来看另外一种情况。

//promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 2000); 
 })

 promise.then(value => {
   console.log(1)
   console.log('resolve1', value)
 })
 
 promise.then(value => {
  console.log(2)
  console.log('resolve2', value)
})

promise.then(value => {
  console.log(3)
  console.log('resolve3', value)
})

这段代码执行的结果是延迟2秒后，打印3和resolve3 success，很明显这不符合我们的预期。

同一个Promise对象的then方法是可以被多次调用的。
对于同步的回调，直接执行就可以；对于异步的回调，我们需要用数组把这些成功和失败的回调函数用数组保存起来，等到promise对象状态改变的时候再去执行数组中的这些回调函数。

我们继续对代码进行改造！

// myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  constructor (exector) {
    exector(this.resolve, this.reject)
  }
    
  status = PENDING
  value = undefined
  reason = undefined
  // 定义一个成功回调的空数组
  successCallback = []
  // 定义一个失败回调的空数组
  failCallback = []

  resolve = value => {
    if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    // 判断成功回调是否存在，如果存在就调用
    // 循环回调数组. 把数组前面的方法弹出来并且直接调用
    // shift方法是返回数组的第一项，会改变原数组，相当于在数组中每次弹出第一项
    // 数组变空了说明所有回调都执行了
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {
    if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // 判断失败回调是否存在，如果存在就调用
    // 和成功原理一样
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }

  then (successCallback, failCallback) {
    if(this.status === FULFILLED) {
      successCallback(this.value)
    } else if (this.status === REJECTED) {
      failCallback(this.reason)
    } else {
      // 等待
      // 将成功回调和失败回调都保存在数组中
      this.successCallback.push(successCallback)
      this.failCallback.push(failCallback)
    }
  }
}

module.exports = MyPromise

经过这样一改造，再回头执行promise.js，是不是发现这结果如我们所愿~当然到这里我们还有很重要的一个功能没有实现。让我们的小脑袋瓜子回想一下，我们学习Promise是为了解决什么问题来着？对就是那个让我们脑阔疼眼睛疼的回调地狱问题。

then方法的链式调用，为我们解决了回调地狱问题，那我们怎么实现链式调用呢？

then方法想要链式调用就需要返回一个Promise对象
then方法的return返回值会作为下一个then方法的参数
then方法如果return一个promise对象，我们需要判断这个promise的状态

// myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  constructor (exector) {
    exector(this.resolve, this.reject)
  }

  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {
    if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {
    if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }

  then (successCallback, failCallback) {
    // then方法返回第一个promise对象
    let promise2 = new Promise((resolve, reject) => {
      if(this.status === FULFILLED) {
        // x是上一个promise回调函数的return返回值
        // 判断 x 的值时普通值还是promise对象
        // 如果是普通纸 直接调用resolve
        // 如果是promise对象 查看promise对象返回的结果
        // 再根据promise对象返回的结果 决定调用resolve还是reject
        let x = successCallback(this.value)
        resolvePromise(x, resolve, reject)
      } else if (this.status === REJECTED) {
         let x = failCallback(this.reason)
         resolvePromise(x, resolve, reject)
      } else {
        this.successCallback.push(() => {
            let x = successCallback(this.value)
            resolvePromise(x, resolve, reject)
            })
        this.failCallback.push(() => {
            let x = failCallback(this.value)
            resolvePromise(x, resolve, reject)
            })
      }
    });
    return promise2
  }
}

function resolvePromise(x, resolve, reject) {
  // 判断x是不是其实例对象
  if(x instanceof MyPromise) {
    // promise 对象
    // x.then(value => resolve(value), reason => reject(reason))
    // 简化之后
    x.then(resolve, reject)
  } else{
    // 普通值
    resolve(x)
  }
}

module.exports = MyPromise

在这里我们还需要考虑到一种情况就是如果then方法返回的是自己的这个promise对象，就会发生promise套娃，我们需要在出现这种情况的时候报错。

// myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  constructor (exector) {
    exector(this.resolve, this.reject)
  }

  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {
    if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    while(this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {
    if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    while(this.failCallback.length) this.failCallback.shift()(this.reason)
  }

  then (successCallback, failCallback) {
    // then方法返回第一个promise对象
    let promise2 = new Promise((resolve, reject) => {
      if(this.status === FULFILLED) {
        // 因为new Promise需要执行完成之后才有promise2，同步代码中没有pormise2，
        // 所以这部分代码需要异步执行
        setTimeout(() => {
          let x = successCallback(this.value)
          //需要判断then之后return的promise对象和原来的是不是一样的，
          //判断x和promise2是否相等，所以给resolvePromise中传递promise2过去
          resolvePromise(promise2, x, resolve, reject)
          }, 0);
      } else if (this.status === REJECTED) {
         // 所以这部分代码需要异步执行
         setTimeout(() => {
         let x = failCallback(this.reason)
         resolvePromise(x, resolve, reject)
          }, 0);
      } else {
        this.successCallback.push(() => {
            // 所以这部分代码需要异步执行
            setTimeout(() => {
            let x = successCallback(this.value)
            resolvePromise(x, resolve, reject)
             }, 0);   
            })
        this.failCallback.push(() => {
            // 所以这部分代码需要异步执行
            setTimeout(() => {
            let x = failCallback(this.value)
            resolvePromise(x, resolve, reject)
            }, 0);  
            })
      }
    });
    return promise2
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // 如果相等了，说明return的是自己，抛出类型错误并返回
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if(x instanceof MyPromise) {
    x.then(resolve, reject)
  } else{
    resolve(x)
  }
}

module.exports = MyPromise

目前我们就实现了then的链式调用，但是在我们的Promise类中没有进行任何捕获和处理错误的操作。

我们使用try catch进行捕获和处理错误，如果我们的执行器或者后面then方法有错误，我们需要将promise的状态改为rejected状态。

// myPromise.js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  constructor (exector) {
    // 捕获错误，如果有错误就执行reject
    try {
      exector(this.resolve, this.reject)
    } catch (e) {
      this.reject(e)
    }
  }


  status = PENDING
  value = undefined
  reason = undefined
  successCallback = []
  failCallback = []

  resolve = value => {
    if(this.status !== PENDING) return
    this.status = FULFILLED
    this.value = value
    // 异步回调传值
    // 调用的时候不需要传值，因为下面push到里面的时候已经处理好了
    while(this.successCallback.length) this.successCallback.shift()()
  }

  reject = reason => {
    if(this.status !== PENDING) return
    this.status = REJECTED
    this.reason = reason
    // 异步回调传值
    // 调用的时候不需要传值，因为下面push到里面的时候已经处理好了
    while(this.failCallback.length) this.failCallback.shift()()
  }

  then (successCallback, failCallback) {
    let promise2 = new Promise((resolve, reject) => {
      if(this.status === FULFILLED) {
        setTimeout(() => {
          // 如果回调中报错的话就执行reject
          try {
            let x = successCallback(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          // 如果回调中报错的话就执行reject
          try {
            let x = failCallback(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else {
        // 处理异步的成功错误情况
        this.successCallback.push(() => {
          setTimeout(() => {
            // 如果回调中报错的话就执行reject
            try {
              let x = successCallback(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
        this.failCallback.push(() => {
          setTimeout(() => {
            // 如果回调中报错的话就执行reject
            try {
              let x = failCallback(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        })
      }
    });
    return promise2
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if(x instanceof MyPromise) {
    x.then(resolve, reject)
  } else{
    resolve(x)
  }
}

module.exports = MyPromise

我们搞个栗子测试下

// promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  // 一个异步方法
  setTimeout(() =>{
    resolve('succ')
  },2000)
})
 
 promise.then(value => {
  console.log(1)
  console.log('resolve', value)
  return 'aaa'
}, reason => {
  console.log(2)
  console.log(reason.message)
  return 100
}).then(value => {
  console.log(3)
  console.log(value);
}, reason => {
  console.log(4)
  console.log(reason.message)
})

// 1
// resolve succ
// 3
// aaa

我们在实际使用过程中，then方法中的参数是可选的，我们可以传一个或者不传参数，实现其实很简单。

// myPromise.js
then (successCallback, failCallback) {
    // 这里进行判断，如果有回调就选择回调，如果没有回调就传一个函数，把参数传递
    successCallback = successCallback ? successCallback : value => value
    // 错误函数也是进行赋值，把错误信息抛出
    failCallback = failCallback ? failCallback : reason => {throw reason}
    let promise2 = new Promise((resolve, reject) => {
        ...
    })
    ...
}

// 简化也可以这样写，使用的是参数默认值，如果没有就使用默认值
then (successCallback = value => value, failCallback = reason => {throw reason}) {
    ···
}

我们来测试下

// promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  resolve('succ')
})
 
promise.then().then().then(value => console.log(value))

// succ

// promise.js
const MyPromise = require('./myPromise')
let promise = new MyPromise((resolve, reject) => {
  reject('err')
})
 
 promise.then().then().then(value => console.log(value), reason => console.log(reason))

// err

ok这样子我们就成功将Promise撕碎塞进肚子了。我们再来实现一下Promise的常用方法。

2.Promise.all方法的实现

promise.all方法用于解决异步并发问题，详细用法可点击传送门

我们先来分析一下：

all方法接收一个数组，数组中可以是普通值也可以是promise对象
数组中值得顺序一定是我们得到的结果的顺序
promise返回值也是一个promise对象，可以调用then方法
如果数组中所有值是成功的，那么then里面就是成功回调，如果有一个值是失败的，那么then里面就是失败的
使用all方法是用类直接调用，那么all一定是一个静态方法

//myPromise.js
static all (array) {
    //  结果数组
    let result = []
    // 计数器
    let index = 0
    return new Promise((resolve, reject) => {
      let addData = (key, value) => {
        result[key] = value
        index ++
        // 如果计数器和数组长度相同，那说明所有的元素都执行完毕了，就可以输出了
        if(index === array.length) {
          resolve(result)
        }
      }
      // 对传递的数组进行遍历
      for (let i = 0; i < array.lengt; i++) {
        let current = array[i]
        if (current instanceof MyPromise) {
          // promise对象就执行then，如果是resolve就把值添加到数组中去，如果是错误就执行reject返回
          current.then(value => addData(i, value), reason => reject(reason))
        } else {
          // 普通值就加到对应的数组中去
          addData(i, array[i])
        }
      }
    })
}

3.Promise.race方法实现

Promise.all方法是全部成功后才会返回，Promise.race只要有一个成功或者失败就返回，详细用法可点击传送门

// 只要有一个成功或者失败就返回
  static race(array) {
    let promise = new MyPromise((resolve, reject) => {
      for (let i = 0; i < array.length; i++) {
        let curr = array[i];
        // MyPromise实例 结果处理
        if (curr instanceof MyPromise) {
          curr.then(resolve, reject);
        } else {
          // 非MyPromise实例处理
          resolve(curr);
        }
      }
    });
    return promise;
  }

4.Promise.resolve方法的实现

resolve方法返回一个promise对象，如果参数就是promise对象就直接返回，如果是一个普通值，那么需要生成一个promise对象把值返回。详细用法请点击传送门

// myPromise.js
static resolve (value) {
    // 如果是promise对象，就直接返回
    if(value instanceof MyPromise) return value
    // 如果是值就返回一个promise对象，并返回值
    return new MyPromise(resolve => resolve(value))
}

5.Promise.reject方法的实现

和Promise.resolve方法实现类似，详细用法请点击传送门

static reject(reason) {
    // 如果是MyPromise 实例 则直接返回
    if (reason instanceof MyPromise) return reason;
    // 如果是MyPromise 实例 否则返回一个 MyPromise实例
    return new MyPromise((resolve, reject) => reject(reason));
  }

6.Promise.prototype.finally()方法的实现

无论当前最终状态是成功还是失败，finally都会执行
我们可以在finally方法之后调用then方法拿到结果
这个函数是在原型对象上用的
详细用法请点击传送门

// myPromise.js
finally (callback) {
    // 如何拿到当前的promise的状态，使用then方法，而且不管怎样都返回callback
    // 而且then方法就是返回一个promise对象，那么我们直接返回then方法调用之后的结果即可
    // 我们需要在回调之后拿到成功的回调，所以需要把value也return
    // 失败的回调也抛出原因
    // 如果callback是一个异步的promise对象，我们还需要等待其执行完毕，所以需要用到静态方法resolve
    return this.then(value => {
      // 把callback调用之后返回的promise传递过去，并且执行promise，且在成功之后返回value
      return MyPromise.resolve(callback()).then(() => value)
    }, reason => {
      // 失败之后调用的then方法，然后把失败的原因返回出去。
      return MyPromise.resolve(callback()).then(() => { throw reason })
    })
}

7.Promise.prototype.catch()方法的实现

catch方法是为了捕获promise对象的所有错误回调的
直接调用then方法，然后成功的地方传递undefined，错误的地方传递reason
catch方法是作用在原型对象上的方法
详细用法请点击传送门

// myPromise.js
catch (failCallback) {
    return this.then(undefined, failCallback)
}

总结

这里我们实现了Promise的核心逻辑，也实现了几个Promise的常用方法，其中实现的过程中有些情况是模拟的，比如使用setTimeout来模拟微任务等。更重的是我们要理解Promise内部实现的原理及实现的思想，让我们以后在干代码的时候思路和解决方法更多一些。

历史文章传送门

参考

拉勾大前端训练营

跟兔虫

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录