万字！适合新手入门向的详细手写Promise解析

最新推荐文章于 2024-05-17 13:52:13 发布

乡村中医

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量865

点赞数 22

分类专栏： js小技巧文章标签： javascript 开源

本文链接：https://blog.csdn.net/m0_56446748/article/details/135547753

版权

js小技巧专栏收录该内容

7 篇文章 0 订阅

订阅专栏

关于Promise一直是前端面试的重难点，对于Promise很多人其实一直是一知半解，毕竟一直用的是axios以及Promise附带的async await而对于最原始的then却接触的比较少，而在面对复杂情景下代码执行顺序时却一头雾水，其实Promise要完全掌握最好的方式就是看会源码会写源码。

接下来我们对Promise有简到繁进行解析与自定义
在面试时我们有时候会被要求进行手写Promise，接到这个题时可能不知道从哪里开始写起。很多人第一时间都想一口气写出来，其实这是陷入了一个误区，在没有需求提示的情况下一口气写代码无异于直接背代码，而Promise几百行的源码不是一下就能全部想起来的，自然一时间就无从下手。
最好的方式就是需求带动代码接下来我们看下嘛几段代码：
代码1：

let promise = new TPromise((resolve, reject) => {
          resolve('成功')
   	})

从上面我们可以看到很明显Promise是一个类，而constructor传入的是一个执行函数，执行函数在constructor执行时又传入了两个函数，面对前一句话新手可能会一头雾水不知道代码改怎么写了，函数该在哪定义，又应该在哪执行成了Promise源码的第一个难题。其实只要记住接下来这句话就很好理解了，“函数在哪里传入就在哪里定义”。很明显在执行函数传入，那么就在执行函数的执行环境进行定义，我们就能得到如下代码：

class TPromise{
  constructor(executor){
    this.resolve = (value)=>{
      
    }
    this.reject = (reason)=>{

    }
    executor(this.resolve,this.reject)
  }
}

不知不觉中其实就已经掌握了高阶函数的精髓。
接下来再对代码进行分析，我们都知道Promise内置三种状态：pending，resolved，rejected。pending可以转换到resolved，rejected但不可逆，且resolved，rejected不可互相转换。
前半句很好理解，只要源码中不要出现resolved->pending这种逻辑的代码就行，而后半句其实意思就是如果已经转换为resolved就拒绝执行reject函数（rejected也是一样）。
那么我们就可以对代码进行优化实现：

class TPromise{
  PromiseState = 'pending'
  constructor(executor){
    this.resolve = (value)=>{
      if(this.PromiseState === 'pending'){
        this.PromiseState = 'resolved'
      }
    }
    this.reject = (reason)=>{
      if(this.PromiseState === 'pending'){
        this.PromiseState = 'rejected'
      }
    }
    executor(this.resolve,this.reject)
  }
}

我们有注意到需求代码中有传入一个值：“成功”，那么就先将这个值保存下来：

class TPromise{
  PromiseState = 'pending'
  PromiseResult = null
  constructor(executor){
    this.resolve = (value)=>{
      if(this.PromiseState === 'pending'){
        this.PromiseState = 'resolved'
        this.PromiseResult = value
      }
    }
    this.reject = (reason)=>{
      if(this.PromiseState === 'pending'){
        this.PromiseState = 'rejected'
        this.PromiseResult = reason
      }
    }
    executor(this.resolve,this.reject)
  }
}

到这里其实constructor主体逻辑已经完成的一半，接下来我们看最重要的then函数
还是老样子，先看怎么使用then函数：

let p = new Promise((resolve, reject) => {
  resolve(1)
})

p.then((value) => {
  console.log(value)
})

我们可以看到then函数定义并传入一个执行函数，这个函数接收一个值，这时候我们就可以把上面保存的值传入进来：

class TPromise {
  PromiseState = 'pending'
  PromiseResult = null
  constructor(executor) {
    this.resolve = (value) => {
      if (this.PromiseState === 'pending') {
        this.PromiseState = 'resolved'
        this.PromiseResult = value
      }
    }
    this.reject = (reason) => {
      if (this.PromiseState === 'pending') {
        this.PromiseState = 'rejected'
        this.PromiseResult = reason
      }
    }
    executor(this.resolve, this.reject)
  }
  then(resolvedFn, rejectedFn) {
    if (this.PromiseState === 'resolved') {
      resolvedFn(this.PromiseResult)
    }
    if (this.PromiseState === 'rejected') {
      rejectedFn(this.PromiseResult)
    }
  }
}

接下来进行第二步捕获异常：我们知道在Promise中抛错会使rejectedFn执行那么利用try catch捕获异常后传给reject后改变PromiseState就会使rejectedFn执行并拿到错误值

class TPromise {
  PromiseState = 'pending'
  PromiseResult = null
  constructor(executor) {
    this.resolve = (value) => {
      if (this.PromiseState === 'pending') {
        this.PromiseState = 'resolved'
        this.PromiseResult = value
      }
    }
    this.reject = (reason) => {
      if (this.PromiseState === 'pending') {
        this.PromiseState = 'rejected'
        this.PromiseResult = reason
      }
    }
    try {
      executor(this.resolve, this.reject)
    }catch (error) {
      this.reject(error)
    }
  }
  then(resolvedFn, rejectedFn) {
    if (this.PromiseState === 'resolved') {
      resolvedFn(this.PromiseResult)
    }
    if (this.PromiseState === 'rejected') {
      rejectedFn(this.PromiseResult)
    }
  }

now,我们已经做到将then函数实现高阶函数调用，但是Promise其实是支持异步的，这也就意味着then函数传入的两个执行函数，需要在执行resolve后再执行，这里可以使用消息订阅模式又叫生产者消费者模式，简而言之就是将then传入的执行函数暂时保存在实例的属性上（注意保存的是柯里化后的函数，方便后续调用，用过react的应该知道），接下来再在resolve内部写入执行刚刚保存函数的代码

class TPromise {
  PromiseState = 'pending'
  PromiseResult = null
  resolve_then_callbacks = []
  reject_then_callbacks = []
  constructor(executor) {
    this.resolve = (value) => {
      if (this.PromiseState === 'pending') {
        this.PromiseState = 'resolved'
        this.PromiseResult = value
        this.resolve_then_callbacks.forEach((callback) => {
          callback()
        })
      }
    }
    this.reject = (reason) => {
      if (this.PromiseState === 'pending') {
        this.PromiseState = 'rejected'
        this.PromiseResult = reason
        this.reject_then_callbacks.forEach((callback) => {
          callback()
        })
      }
    }
    try {
      executor(this.resolve, this.reject)
    }catch (error) {
      this.reject(error)
    }
  }
  then(resolvedFn, rejectedFn) {
    if (this.PromiseState === 'resolved') {
      resolvedFn(this.PromiseResult)
    }
    if (this.PromiseState === 'rejected') {
      rejectedFn(this.PromiseResult)
    }
    if (this.PromiseState === 'pending') {
      this.resolve_then_callbacks.push(() => {//注意这里不单单传入的是函数变量，而是函数柯里化
        resolvedFn(this.PromiseResult)
      })
      this.reject_then_callbacks.push(() => {//之所以使用数组保存是因为then函数支持多次调用有效
        rejectedFn(this.PromiseResult)
      })
    }
  }
}

到这里我们已经完成了then函数的单次调用基本功能，我们看接下来的Promise需求代码：

let p = new Promise((resolve, reject) => {
  resolve(1)
})

p.then((value) => {
  console.log(value)
  return ‘ok’
}).then((value) => {
  console.log(value)
})

我们可以注意到then函数后面又跟了一个.then，这意味着then函数有返回值而且这个返回值甚至还能调用then函数，那么这个返回值是什么就很清楚了，我们只需要再返回一个Promsie的实例就行了,但返回一个实例还不行，因为我们知道then函数能够执行是因为类Promise的执行器函数内部执行了resolve函数改变了PromiseState，那么意味着我们初始化并返回实例时，需要在初始化时执行resolve或reject函数。
那么问题来了resolve或reject函数是需要传入值的，那我们传入什么值呢，我们依旧从需求入手，发现“正版”Promsie是可以实现值传递的，那我们就传入上一个then函数执行后返回的值

then(resolvedFn, rejectedFn) {
    return new IPromise((resolve, reject) => {
      if (this.PromiseState === 'resolved') {
        let result = resolvedFn(this.PromiseResult)
        resolve(result)
      }
      if (this.PromiseState === 'rejected') {
        let result = rejectedFn(this.PromiseResult)
        resolve(result)
      }
      if (this.PromiseState === 'pending') {
        this.resolve_then_callbacks.push(() => {
          let result = resolvedFn(this.PromiseResult)
          resolve(result)
        })
        this.reject_then_callbacks.push(() => {
          let result = rejectedFn(this.PromiseResult)
          resolve(result)
        })
      }
    })
  }

注：完整代码越来越大，方便起见，其余代码如若未有改动这里就不贴了，最后我会贴上完整代码！

上面的代码只是做到正常返回值的情况，而我们“真正”Promise是可以返回Promsie实例的，大家不要小看这个功能，如果可以返回Promise实例也就意味着在可以在执行器函数再继续进行异步操作，这在很多异步任务是非常方便的，如果你做过经典的面试题红绿灯就会知道这一点有多么重要。

我们回来继续分析，既然可以返回Promise实例，那么这个实例就能执行then函数，那么我们就能拿到传入的值传到下一个then中嘛。

  then(resolvedFn, rejectedFn) {
    return new IPromise((resolve, reject) => {
      if (this.PromiseState === 'resolved') {
        try {
          let result = resolvedFn(this.PromiseResult)
          if (result instanceof IPromise) {
            result.then(
              (v) => {
                resolve(v)
              },
              (r) => {
                reject(r)
              }
            )
          } else {
            resolve(result)
          }
        } catch (error) {
          reject(error)
        }
      }
      if (this.PromiseState === 'rejected') {
        let result = rejectedFn(this.PromiseResult)
        resolve(result)
      }
      if (this.PromiseState === 'pending') {
        this.resolve_then_callbacks.push(() => {
          let result = resolvedFn(this.PromiseResult)
          resolve(result)
        })
        this.reject_then_callbacks.push(() => {
          let result = rejectedFn(this.PromiseResult)
          resolve(result)
        })
      }
    })
  }

其他返回函数也是一样，这里碍于篇幅我就不一一写了。最后其实可以把函数提出来，后面的代码会有所体现。

then函数已经完成了九成，还有就是一些“容错”代码；
我们有时候会发现，并不是所有then函数都会传入函数返回点什么东西，但是代码依旧能按我们预想的执行顺序执行（比如不返回执行resolve而不是reject）。既然他不返回我们帮他返回就是了，只是值返回undefined就是了

then(resolvedFn, rejectedFn) {
		if (typeof rejectedFn !== 'function') {
      //异常穿透
      rejectedFn = (reason) => {
        throw reason
      }
    }
    if (typeof resolvedFn !== 'function') {
      //值传递
      resolvedFn = (value) => {
        return value
      }
    }
    return new IPromise((resolve, reject) => {
      const tryReturn = (fn) => {
        try {
          let result = fn(this.PromiseResult)
          if (result instanceof IPromise) {
            result.then(
              (v) => {
                resolve(v)
              },
              (r) => {
                reject(r)
              }
            )
          } else {
            resolve(result)
          }
        } catch (error) {
          reject(error)
        }
      }
      if (this.PromiseState === 'resolved') {
        tryReturn(resolvedFn)
      }
      if (this.PromiseState === 'rejected') {
        tryReturn(rejectedFn)
      }
      if (this.PromiseState === 'pending') {
        this.resolve_then_callbacks.push(() => {
          tryReturn(resolvedFn)
        })
        this.reject_then_callbacks.push(() => {
          tryReturn(rejectedFn)
        })
      }
    })
  }

到这里就已经完成Promise的基础功能代码了
我们看一下劳动成果：

class TPromise {
  PromiseState = 'pending'
  PromiseResult = null
  resolve_then_callbacks = []
  reject_then_callbacks = []
  constructor(executor) {
    this.resolve = (value) => {
      if (this.PromiseState === 'pending') {
        this.PromiseState = 'resolved'
        this.PromiseResult = value
        this.resolve_then_callbacks.forEach((callback) => {
          callback()
        })
      }
    }
    this.reject = (reason) => {
      if (this.PromiseState === 'pending') {
        this.PromiseState = 'rejected'
        this.PromiseResult = reason
        this.reject_then_callbacks.forEach((callback) => {
          callback()
        })
      }
    }
    try {
      executor(this.resolve, this.reject)
    } catch (error) {
      this.reject(error)
    }
  }
  then(resolvedFn, rejectedFn) {
    return new IPromise((resolve, reject) => {
      const tryReturn = (fn) => {
        try {
          let result = fn(this.PromiseResult)
          if (result instanceof IPromise) {
            result.then(
              (v) => {
                resolve(v)
              },
              (r) => {
                reject(r)
              }
            )
          } else {
            resolve(result)
          }
        } catch (error) {
          reject(error)
        }
      }
      if (this.PromiseState === 'resolved') {
        tryReturn(resolvedFn)
      }
      if (this.PromiseState === 'rejected') {
        tryReturn(rejectedFn)
      }
      if (this.PromiseState === 'pending') {
        this.resolve_then_callbacks.push(() => {
          tryReturn(resolvedFn)
        })
        this.reject_then_callbacks.push(() => {
          tryReturn(rejectedFn)
        })
      }
    })
  }
}

这里大家可能会发现我的代码只要是函数就都是箭头函数的形式，这是因为我所有的代码都是在类中写的并且我希望代码中的所有this都是指向类实例的，就运用闭包以及箭头函数的特性，使代码不用纠结于this的指向。
还有一个就是catch捕获异常的函数，因为前面已经顺手写了异常穿透的代码，所以现在写起来就很简单

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

最后就是不管是 resolve 还是 reject 都会调用 finally 。那么相当于 fianlly 方法替使用者分别调用了一次 then 的 resolved 和 rejected 状态回调。

finally (fn) {
  return this.then(
    (value) => {
      fn();
      return value;
    },
    (reason) => {
      fn();
      throw reason;
    }
  );
};

接下来就要轻松许多了，前人栽树后人乘凉。让我们利用现有代码来完成几个类上面的静态方法：

resolve，返回一个Promise实例，同时也支持返回值是Promise

 static resolve(data) {
    return new IPromise((resolve, reject) => {
      if (data instanceof IPromise) {
        data.then(
          (v) => {
            resolve(v)
          },
          (r) => {
            reject(r)
          }
        )
      } else {
        resolve(data)
      }
    })
  }

reject，与resolve不同的是，它不管返回什么都是失败Promise

static reject(data) {
    return new IPromise((resolve, reject) => {
      reject(data)
    })
  }

all，接受Promise数组，按顺序返回Promise结果。注意是按顺序，所以收获结果时不能直接push

static all(data) {
    return new IPromise((resolve, reject) => {
      let count = 0
      let resArr = []
      // 遍历
      for (let i = 0; i < data.length; i++) {
        data[i].then(
          (v) => {
            count++
            resArr[i] = v //注意顺序
            if (count === data.length) {
              resolve(resArr)
            }
          },
          (r) => {
            reject(r)
          }
        )
      }
    })
  }

race，接受Promise数组，返回最先响应的结果

static race(data) {
    return new IPromise((resolve, reject) => {
      for (let i = 0; i < data.length; i++) {
        data[i].then(
          (v) => {
            resolve(v)
          },
          (r) => {
            reject(r)
          }
        )
      }
    })
  }

allSettled，方法只有等到参数数组的所有 Promise 实例都发生状态变更，返回的 Promise 实例才会发生状态变更，无论是执行 resolve 回调还是 reject 回调的状态。

static allSettled(promises){
	return new IPromise((resolve, reject) => {
    if (promises.length === 0) {
      resolve([]);
    } else {
      let result = [];
      let index = 0;
      for (let i = 0; i < promises.length; i++) {
        promises[i]
          .then(
            (value) => {
              result[i] = {
                status: 'fulfilled',
                value,
              };
            },
            (reason) => {
              result[i] = {
                status: 'rejected',
                reason,
              };
            }
          )
          .finally(() => {
            if (++index === promises.length) {
              return resolve(result);
            }
          });
      }
    }
  });
}

any,返回任意一个最快执行 resolve 回调的 Promise 实例

static any(promises){
		return new IPromise((resolve, reject) => {
    if (promises.length === 0) {
      return resolve();
    } else {
      let result = [];
      let index = 0;
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(
          (value) => {
            return resolve(value);//有结果就返回
          },
          (reason) => {
            result[i] = reason;
            if (++index === promises.length) {//不断计数，直到都是失败的Promise
              return reject(new AggregateError(result));
            }
          }
        );
      }
    }
  });
}

到这里，所有Promise代码其实都已经完成了，但其实一直有一个坑没有填，也是Promsie的灵魂，就是在Promsie中then执行的的函数其实并不是在这一次事件循环中执行，而是在下一次事件循环中的宏任务中执行，所以我们的代码要做一些许修改；只需要在callbacks遍历执行函数这一段的代码放入异步队列，还有一个就是tryreturn代码片段放入异步队列即可

乡村中医

关注

22
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
万字！适合新手入门向的详细手写Promise解析

我们可以注意到then函数后面又跟了一个.then，这意味着then函数有返回值而且这个返回值甚至还能调用then函数，那么这个返回值是什么就很清楚了，我们只需要再返回一个Promsie的实例就行了,但返回一个实例还不行，因为我们知道then函数能够执行是因为类Promise的执行器函数内部执行了resolve函数改变了PromiseState，那么意味着我们初始化并返回实例时，需要在初始化时执行resolve或reject函数。其实只要记住接下来这句话就很好理解了，“函数在哪里传入就在哪里定义”。
复制链接

扫一扫