0
0

手写 Promise ？∑(っ °Д °；)っ 这么简单

前言

不知不觉搁了 5 个月了，今年（农历）真的是很忙，忙的都没有兴致写博客了。最近心血来潮，按照自己的思路实现了一个 

  1. Promise

，写的很快，代码也相当简单，特来记录分享一下，作为 2022 年开篇博文。

初想实现

  1. functiongetData(){returnnewPromise((resolve, reject)=>{setTimeout(()=>{resolve({code:200, data:{desc:'Hello world!'}})},2000)// setTimeout(() => {//     reject({code: 400, data: {desc: 'Error!'}})// }, 4000)})}getData().then(res=>{
  2.     console.log(res);}).catch(err=>{
  3.     console.log(err);})

最初就是想实现上述的功能，**两秒后打印 

  1. {code: 200, data: {desc: 'Hello world!'}}

** ，那就同我一起一点一点去探索。

我在 2021 年开篇博文 简单实现Vue中的双向绑定、生命周期以及计算属性！！！中曾写过这样一句话：我们尝试模拟一个已存在的框架的时候，可以通过现有的结果去推断我们的代码如何设计 ，那我们想实现一下 

  1. Promise

，就需要剖析一下原生 

  1. Promise

的基本表现形式，按照上述代码：

  1. 实现一个 Promise 函数或类，并接收一个函数作为参数，并且这个函数会提供两个参数，这两个参数都是函数，可以执行一些操作
  2. new Promise() 对象具有 then 和 catch 方法，并支持链式调用

类和回调

描述还是很简单的，根据上述描述可以实现 

  1. Promise

的基本雏形，先实现第一条，如下：

  1. classSelfPromise{constructor(executor){executor(val=>{// resolve 函数的操作},val=>{// reject 函数的操作})}}

构造方法 

  1. constructor

接收一个 

  1. executor

函数并执行。

  1. executor

函数接收两个参数，分别是 

  1. resolve

函数 和 

  1. reject

函数。 OK，第一条实现完毕。

基于原型的链式调用

第二条链式调用就更好实现，如下：

  1. classSelfPromise{constructor(executor){executor(val=>{// resolve 函数的操作},val=>{// reject 函数的操作})}then(){returnthis}catch(){returnthis}}

实例对象是可以调用原型上的方法的，而在这里，原型方法 

  1. then

里面的 

  1. this

也就是它的调用者 

  1. new Promise()

，这就实现了链式调用。

回调函数和异步

好，那么如何实现 **两秒后打印 

  1. {code: 200, data: {desc: 'Hello world!'}}

**，我们再来结合原生 

  1. Promise

的表现形式仔细掰扯掰扯：

  1. resolve 函数接收一个参数， then 函数接收一个回调函数作为参数，该回调函数又接收 resolve 传入的参数作为入参

这里描述的比较绕，但确实就是这样，代码实现如下：

  1. classSelfPromise{
  2.     #resolveCallback =nullconstructor(executor){executor(val=>{// resolve 函数的操作this.#resolveCallback &&this.#resolveCallback(val)},val=>{// reject 函数的操作})}then(callback){this.#resolveCallback = callback
  3.         returnthis}catch(){returnthis}}newSelfPromise((resolve)=>{setTimeout(()=>resolve('success'),2000)}).then(res=>{
  4.     console.log(res)})

以上的简短代码就已经实现了 **两秒后打印 

  1. {code: 200, data: {desc: 'Hello world!'}}

** 这个功能，可直接复制代码在浏览器调试。

实现原理非常简单：

无论是 

  1. then

还是 

  1. catch

函数全是同步任务，真正异步执行的是它们的回调函数。

将 

  1. then

的入参缓存在一个私有变量 

  1. #resolveCallback

中， 

  1. resolve

函数在一个定时器中被调用，甚至可以这样理解 

  1. this.#resolveCallback = callback

这一行执行完毕后，2 秒后才能执行 

  1. resolve

函数。

所以，根据上述的代码，当执行到 

  1. resolve

后，

  1. #resolveCallback

早已准备好等待调用了。

将 

  1. resolve

入参传递给 

  1. #resolveCallback

函数并执行，就实现了 **两秒后打印 

  1. {code: 200, data: {desc: 'Hello world!'}}

** 这个功能。这里的 

  1. #resolveCallback

函数异步执行实际上是蹭了 

  1. resolve

的车。

具体实现

执行状态规范

基本雏形上面已实现，接下来稍微写个具体，这里我参考了网上的一个规范：

异步操作“未完成”（pending）
异步操作“已完成”（resolved，又称fulfilled）
异步操作“失败”（rejected）

这三种的状态的变化途径只有两种：
异步操作从“未完成”到“已完成”
异步操作从“未完成”到“失败”

这种变化只能发生一次，一旦当前状态变为“已完成”或“失败”，就意味着不会再有新的状态变化了。因此，Promise 对象的最终结果只有两种：
异步操作成功，Promise 对象传回一个值，状态变为 resolved
异步操作失败，Promise 对象抛出一个错误，状态变为 rejected

根据上述规范，编写出如下代码：

  1. classSelfPromise{
  2.     #promiseState ='pending'
  3.     #resolveCallback =null
  4.     #rejectCallback =null
  5.     #finallyCallback =nullstaticisFunc(func){returntypeof func ==='function'}constructor(executor=(resolve, reject)=>{}){executor(successValue=>{// 如果状态是 rejected，则 then 不执行if(this.#promiseState ==='rejected')returnthis.#promiseState ='resolved'setTimeout(()=>{
  6.                 SelfPromise.isFunc(this.#resolveCallback)&&this.#resolveCallback(successValue)
  7.                 SelfPromise.isFunc(this.#finallyCallback)&&this.#finallyCallback()})},errorValue=>{// 如果状态是 resolved，则 catch 不执行if(this.#promiseState ==='resolved')returnthis.#promiseState ='rejected'setTimeout(()=>{
  8.                 SelfPromise.isFunc(this.#rejectCallback)&&this.#rejectCallback(errorValue)
  9.                 SelfPromise.isFunc(this.#finallyCallback)&&this.#finallyCallback()})})}then(callback){this.#resolveCallback = callback
  10.         returnthis}catch(callback){this.#rejectCallback = callback
  11.         returnthis}finally(callback){this.#finallyCallback = callback
  12.         returnthis}}

示例代码-1

OK，根据上面的规范，我们给 

  1. Promise

加入了一个执行状态，并且补充了 

  1. catch

和 

  1. finally

方法，用以下示例代码试一下：

  1. console.log('start')const p =newSelfPromise((resolve, reject)=>{
  2.     console.log('promise')resolve('success')}).then(res=>{
  3.     console.log(res,'then');}).catch(err=>{
  4.     console.log(err,'catch');}).finally(()=>{
  5.     console.log('finally')})setTimeout(()=>{
  6.     console.log('setTimeout')})
  8. console.log('end')

看看结果：
在这里插入图片描述

示例代码-2

Nice！完美符合原生 

  1. Promise

的表现形式，但是如果改成以下这样试试呢？

  1. console.log('start')setTimeout(()=>{
  2.     console.log('setTimeout')})const p =newSelfPromise((resolve, reject)=>{
  3.     console.log('promise')resolve('success')}).then(res=>{
  4.     console.log(res,'then');}).catch(err=>{
  5.     console.log(err,'catch');}).finally(()=>{
  6.     console.log('finally')})
  8. console.log('end')

在这里插入图片描述

按照 JavaScript 中的事件循环机制，

  1. setTimeout

是宏任务，

  1. new Promise().then()

是微任务，微任务优先于宏任务执行。这里我初步采用 

  1. setTimeout

模拟 

  1. new Promise().then()

的微任务，按照第一种示例代码，放在 

  1. new Promise()

下面，两个定时器时间都一样，很明显两个宏任务会按照代码顺序自上而下依次执行。

但是，第二个示例代码中，

  1. setTimeout

是放在 

  1. new Promise()

上面的，如果 

  1. timeout

参数都是 0 的话，那么就不可能实现原生 

  1. Promise

的表现形式，这并没有实现真正意义上的 微任务。

实现真正的微任务

微任务探索

依据上面一节，我们清楚，只有将下述代码放在微任务中执行，才算真正的模拟了原生 

  1. Promise

的表现形式：

  1. SelfPromise.isFunc(this.#resolveCallback)&&this.#resolveCallback(successValue)
  2. SelfPromise.isFunc(this.#finallyCallback)&&this.#finallyCallback()

那么 JavaScript 有哪些微任务呢？

  1. process.nextTick

NodeJS 专用，PASS

Object.observe() 老早就被废弃的一个方法，PASS
MutationObserver 监听一个指定的DOM，并在发生变化时被调用。嗯？需要创建 dom 元素？？要不要添加到页面中？？会不会影响性能？？

es6-promise 作为 ES6 Promise 的 Polyfill 库，代码质量和权威性毋庸置疑，这里参考一下 它的源码 确认一下：

  1. const BrowserMutationObserver = browserGlobal.MutationObserver || browserGlobal.WebKitMutationObserver;functionuseMutationObserver(){var iterations =0;var observer =newBrowserMutationObserver(flush);var node = document.createTextNode('');
  2.   observer.observe(node,{ characterData:true});returnfunction(){
  3.     node.data = iterations =++iterations %2;};}let scheduleFlush;// Decide what async method to use to triggering processing of queued callbacks:if(isNode){
  4.   scheduleFlush =useNextTick();}elseif(BrowserMutationObserver){
  5.   scheduleFlush =useMutationObserver();}elseif(isWorker){
  6.   scheduleFlush =useMessageChannel();}elseif(browserWindow ===undefined&&typeof require ==='function'){
  7.   scheduleFlush =attemptVertx();}else{
  8.   scheduleFlush =useSetTimeout();}

根据上述代码，我们可以得出，除了 NodeJS 环境，

  1. MutationObserver

竟然是首选，另外即使 

  1. setTimeout

不能完美实现，也被当成最后的备选方案。那是因为，只要业务代码中 

  1. setTimeout

的 

  1. timeout

值大于 1 的话，也可以稍微模拟一下原生 

  1. Promise

的表现形式（谷歌浏览器中亲测通过）。

基于

  1. MutationObserver

的微任务

结合 MDN 文档了解一下 

  1. MutationObserver

基本用法，写出下述代码：

  1. functionuseMutationObserver(callback){let iterations =0;const observer =newMutationObserver(callback);const node = document.createTextNode('');// characterData 设为 true 以监视指定目标节点或子节点树中节点所包含的字符数据的变化。
  2.     observer.observe(node,{characterData:true});returnfunction(){
  3.         node.data = iterations =++iterations %2;};}
  5. console.log('start')setTimeout(()=> console.log('setTimeout'))let microtask =useMutationObserver(()=>{
  6.     console.log('Hello MutationObserver!')})microtask()
  8. console.log('end')

打印结果如下：

在这里插入图片描述

Amazing！由于这里借助于 

  1. MutationObserver

接口，仅仅在创建一个空白文本节点的情况下就能实现微任务调用，性能开销几乎可以忽略不计 (๑•̀ㅂ•́)و✧ (๑•̀ㅂ•́)و✧ (๑•̀ㅂ•́)و✧。

PS：

  1. node.data = iterations = ++iterations % 2;

这行代码是一个不错的编程技巧。

最终实现代码

  1. functionuseMutationObserver(callback){let iterations =0;const observer =newMutationObserver(callback);const node = document.createTextNode('');// characterData 设为 true 以监视指定目标节点或子节点树中节点所包含的字符数据的变化。
  2.     observer.observe(node,{characterData:true});returnfunction(){
  3.         node.data = iterations =++iterations %2;};}classSelfPromise{
  4.     #promiseState ='pending'
  5.     #resolveCallback =null
  6.     #rejectCallback =null
  7.     #finallyCallback =nullstaticisFunc(func){returntypeof func ==='function'}constructor(executor=(resolve, reject)=>{}){executor(successValue=>{// 如果状态是 rejected，则 then 不执行if(this.#promiseState ==='rejected')returnthis.#promiseState ='resolved'useMutationObserver(()=>{
  8.                 SelfPromise.isFunc(this.#resolveCallback)&&this.#resolveCallback(successValue)
  9.                 SelfPromise.isFunc(this.#finallyCallback)&&this.#finallyCallback()})()},errorValue=>{// 如果状态是 resolved，则 catch 不执行if(this.#promiseState ==='resolved')returnthis.#promiseState ='rejected'useMutationObserver(()=>{
  10.                 SelfPromise.isFunc(this.#rejectCallback)&&this.#rejectCallback(errorValue)
  11.                 SelfPromise.isFunc(this.#finallyCallback)&&this.#finallyCallback()})()})}then(callback){this.#resolveCallback = callback
  12.         returnthis}catch(callback){this.#rejectCallback = callback
  13.         returnthis}finally(callback){this.#finallyCallback = callback
  14.         returnthis}}

再来试试以下代码的打印：

  1. console.log('start')setTimeout(()=>{
  2.     console.log('setTimeout')})const p =newSelfPromise((resolve, reject)=>{
  3.     console.log('promise')reject('error')}).then(res=>{
  4.     console.log(res,'then');}).catch(err=>{
  5.     console.error(err,'catch');}).finally(()=>{
  6.     console.log('finally')})
  8. console.log('end')

在这里插入图片描述
100% 还原ES6原生 

  1. Promise

执行结果！！！

后记

开始之初是只想实现 **两秒后打印 

  1. {code: 200, data: {desc: 'Hello world!'}}

** 这样的功能，也没想到最后竟一比一模拟出了原生 

  1. Promise

的执行结果。当然，这其中有很多细节我没有深入去实现，也没有按照更完整的 Promises/A+ 规范来编写代码。

但是深入思考一些未知的事物并实现解决真的是能给我带来极大的乐趣，把自己踩的坑、思考的过程、学到的思想整理成文字分享出来，并能给他人带来帮助也能给我带来极大的满足。

知识有穷尽，编程思想、创造力无穷尽！无论是 

  1. Vue

还是 

  1. es6-promise

，都是其作者掌握着极其广度、深度的知识点再加上自己的思想所创造出来的。所以，2022 年都卷起来吧！！！

参考

es6-promise 源码

标签： javascript 手写 Promise Promise
本文转载自: https://blog.csdn.net/dizuncainiao/article/details/122689338
版权归原作者 帝尊菜鸟 所有， 如有侵权，请联系我们删除。
登录后发布评论

“手写 Promise ？∑(っ °Д °；)っ 这么简单”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？