经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JS Promise的用法, 以及自己模拟一个Promise
来源：cnblogs　　作者：nekodaisuki　　时间：2021/2/18 15:32:34　　对本文有异议

注: 本文中写的类只是为了了解Promise类的内部原理而模拟出来一个, 并不一定符合类似的规范或者效率多么高, 但是基本的功能还是实现了的.
注: 本文代码运行环境: NodeJS v14.9.0

用法

如下, 这是一个传统的使用回调函数的异步代码

  1. function getAnInt(callback) {
  2.     setTimeout(() => {
  3.         callback(81)
  4.     }, 500)
  5. }
  7. function sqrt(n, resolve, reject) {
  8.     setTimeout(() => {
  9.         let res = Math.sqrt(n)
  10.         if (parseInt(res) === res) {
  11.             resolve(res)
  12.         } else {
  13.             reject("cannot get an int")
  14.         }
  15.     }, 500)
  16. }
  18. let errHandler = err => console.log("Error " + err)
  20. getAnInt(v1 => {
  21.     console.log(v1)
  22.     sqrt(v1, v2 => {
  23.         console.log(v2)
  24.         sqrt(v2, v3 => {
  25.             console.log(v3)
  26.             sqrt(v3, v4 => {
  27.                 console.log(v4)
  28.             }, errHandler)
  29.         }, errHandler)
  30.     }, errHandler)
  31. })

执行结果:

  1. 81
  2. 9
  3. 3
  4. Error cannot get an int

有没有感觉眼花缭乱? 这金字塔状的代码被亲切地称为回调地狱, 下面就是我们的主角Promise上场的时候了, 酱酱酱酱

  1. function getAnInt() {
  2.     return new Promise((resolve, reject) => {
  3.         setTimeout(() => {
  4.             resolve(81)
  5.         }, 500)
  6.     })
  7. }
  9. function sqrt(n) {
  10.     return new Promise((resolve, reject) => {
  11.         setTimeout(() => {
  12.             let res = Math.sqrt(n)
  13.             if (parseInt(res) === res) {
  14.                 resolve(res)
  15.             } else {
  16.                 reject("cannot get an int")
  17.             }
  18.         }, 500)
  19.     })
  20. }
  23. getAnInt().then(v1 => {
  24.     console.log(v1)
  25.     return sqrt(v1)
  26. }).then(v2 => {
  27.     console.log(v2)
  28.     return sqrt(v2)
  29. }).then(v3 => {
  30.     console.log(v3)
  31.     return sqrt(v3)
  32. }).then(v4 => {
  33.     console.log(v4)
  34. }).catch(err => {
  35.     console.log("Error " + err)
  36. })

执行结果:

  1. 81
  2. 9
  3. 3
  4. Error cannot get an int

结果一模一样, 但是这个代码写出来的感觉, 就是要清晰了好多好多好多好多好多好多好多好多好多好多好多好多

介绍

在Promise/A+标准中定义了Promise到底是个什么东西, 这里挑出重点部分, 其余的规范如果想看的话点这里去官网

  • promise 含有then方法, 没有规定其它的方法.
  • then方法会返回一个新的promise
  • then方法的参数是onFulfilled, onRejected, 它们都是可选的(当然都是函数类型)
  • promise有三个状态, pending(代办), fulfilled(完成) 和 rejected(被拒绝), 状态只能从pending转成另外两个, 然后就不能再转了.
  • 如果onRejected或者onFulfilled返回了一个Promise对象, 需要得出它的结果再传给下一个then方法里对应的地方

因为本文代码中有很多的 resolve, 所以这里的代码使用resolved(被解决)代替fulfilled

为什么没有列出来更多的内容呢, 因为其它的内容大多和兼容性有关, 与这个实现原理关系不是太大, 还有的是到具体实现函数的时候才会用到的规范, 所以我没有列出来

注: catch方法是ES6标准里的, 它的原理是then(null, onRejected)

实现

注: 本文代码不考虑throw, 为了只体现原理, 让代码尽可能更简单.

构造函数

Promise的构造函数通常传入一个执行者函数, 这个函数里面可能是异步逻辑(这么说的意思就是也可能不是), 接受两个参数: resolve和reject.

  • 调用resolve(value)就代表方法成功执行了, Promise会把resolve中传入的value传给then方法里的参数

  • 调用reject(reason)就是执行出错了, Promise会把reject中传入的reason传给then方法里的参数

好, 下面开始做点准备工作

  1. const Pending  = 'pending'
  2. const Resolved = 'resolved'
  3. const Rejected = 'rejected'
  5. class MyPromise {}

诶, 这段代码我感觉不用解释了吧? 下面的我会在注释或者是代码块下方说明

  2. class MyPromise {
  3.     constructor(executor) {
  4.         // 状态
  5.         this.status = Pending
  6.         // 正常运行返回的结果
  7.         this.value = null
  8.         // 发生错误的原因
  9.         this.reason = null
  10.         // 详见这段代码块下面写的 注1
  11.         this.onRejected = () => {}
  12.         this.onResolved = () => {}
  13.         
  14.         let resolve = value => {
  15.             // 如果不是Pending就忽略
  16.             if (this.status !== Pending) {
  17.                 return
  18.             }
  19.             this.status = Resolved
  20.             this.value = value
  21.             this.onResolved(value)
  22.         }
  24.         let reject = reason => {
  25.             // 如果不是Pending就忽略
  26.             if (this.status !== Pending) {
  27.                 return
  28.             }
  29.             this.status = Rejected
  30.             this.reason = reason
  31.             this.onRejected(reason)
  32.         }
  33.         // 见 注2
  34.         executor(resolve, reject)
  35.     }
  36. }

  • 注1: 这是两个被reject或者resolve后调用的回调函数, 我看的别人实现的版本大多是一个数组, 然后调用的时候一个接一个调用里面的函数.

    我认为对同一个promise调用多次then方法的时候很少, 而且本文只是一个思路展示, 并不严格遵守A+规范, 所以这里就直接写了个什么也没干的函数

    在这里也分析一下, 在then方法调用的时候, 如果调用then时的状态是Pending, 那么就设置一下当前对象里的onRejected和onResolved, 具体设置什么在后面的代码里会提到; 如果状态不是Pending, 就代表这两个函数早就执行完了, 就需要根据this.value和this.reason具体的调用then函数中传进来的onRejected和onResolved.

  • 注2: 这里直接同步调用了, 没有异步调用. 因为如果这个操作真的需要异步的话, 在executor函数里面就会有异步方法了(如setTimeout), 不需要Promise类给它办.

Then方法

然后就是then方法啦~

注意: then方法要求每次返回新的Promise对象.

先写个框架

  1. then(onResolved, onRejected) {
  2.   let funcOrNull = f => typeof f === "function" ? f : null
  3.   onResolved = funcOrNull(onResolved)
  4.   onRejected = funcOrNull(onRejected)
  6.   if (this.status === Rejected) {
  7.     return new MyPromise((resolve, reject) => {
  9.     })
  10.   } else if (this.status === Resolved) {
  11.     return new MyPromise((resolve, reject) => {
  13.     })
  14.   } else {
  15.     return new MyPromise((resolve, reject) => {
  17.     })
  18.   }
  19. }

Rejected

如果是状态是rejected, 那么

  1. if (this.status === Rejected) {
  2.     return new MyPromise((resolve, reject) => {
  3.         let value = (onRejected === null ? reject : onRejected)(this.reason)
  4.         if (value instanceof MyPromise) {
  5.             value.then(resolve, reject)
  6.         } else {
  7.             resolve(value)
  8.         }
  9.     })
  10. }

这些实现的代码包括下面的elseif和else块就是最难理解的了, 我当时是好久好久也没有理解, 接下来我会就像数学里面一样分类讨论:

关于Rejected块的详细说明(尽管也就10行)

理解了Rejected块, 那么Resolved块和他几乎一模一样, 只是函数名字不一样而已, 所以我这里会分析的尽可能详细

  • 如果调用的时候是这样的:

    1. new MyPromise((resolve, reject) => {
    2.     reject("I rejected the promise")
    3. }).then(null, console.log)

    先分析构造方法, 创建Promise对象的时候, 这里它的状态就变成Rejected, 但是其他的什么事都没干, 让我们来看前面的代码

    1. this.onRejected = () => {}
    2. this.onResolved = () => {}
    4. let reject = reason => {
    5.     if (this.status !== Pending) {
    6.         return
    7.     }
    8.     this.status = Rejected
    9.     this.reason = reason
    10.     this.onRejected(reason)
    11. }
    12. executor(resolve, reject)

    这个时候this.onRejected还是个空函数, 所以调用它也没什么用
    接下来到then方法了, 让我们来看上面if块里的代码

    1. return new MyPromise((resolve, reject) => {
    2.     let value = (onRejected === null ? reject : onRejected)(this.reason)
    3.     if (value instanceof MyPromise) {
    4.         value.then(resolve, reject)
    5.     } else {
    6.         resolve(value)
    7.     }
    8. })

    可以看出它执行了let value = onRejected(reason), 然后调用resolve(value), 之后这个新的Promise状态就是Resolved了.

    至于为什么这里要用resolve, 我是通过NodeJS做了个实验看看NodeJS对这件事是怎么干的, 代码如下

    1. let p1 = new Promise((resolve, reject) => {
    2.     reject("I rejected the promise")
    3. })
    5. let p2 = p1.then(null, reason => {
    6.     return 'I am from onRejected function'
    7. })
    9. // 这里是为了不管到底是什么状态都能把p1和p2输出出来
    10. p2.then(() => console.log(p1, p2), () => console.log(p1, p2))

    输出(原本的执行结果没有换行, 我为了方便看自己加上的)

    1. Promise { <rejected> 'I rejected the promise' }
    2. Promise { 'I am from onRejected function' }

    这就看出来NodeJS是在处理完错误之后把onRejected的返回值用resolve函数处理了

  • 如果调用的时候是这样的

    1. new MyPromise((resolve, reject) => {
    2.     reject("I just rejected the promise")
    3. }).then(null, null).then(null, console.log)

    这个时候就要考虑不能把错误信息丢掉了, 为了实现这个"穿透"功能, 我们可以研究一下NodeJS是怎么干的

    1. let p1 = new Promise((resolve, reject) => {
    2.     reject("I rejected the promise")
    3. }).then(null, null)
    5. p1.then(() => console.log(p1), () => console.log(p1))

    输出

    1. Promise { <rejected> 'I rejected the promise' }

    这就很简单了, NodeJS是把新的Promise对象继续调用reject并且传递错误信息. 所以再看上面if块里的代码

    1. return new MyPromise((resolve, reject) => {
    2.     let value = (onRejected === null ? reject : onRejected)(this.reason)
    3.     if (value instanceof MyPromise) {
    4.         value.then(resolve, reject)
    5.     } else {
    6.         resolve(value)
    7.     }
    8. })

    可以看出这里也是在onRejected空的时候直接用reject方法把新的Promise对象的状态设置成了Rejected并且也把this.reason错误信息传了过去.
    展现成代码的话, 就是执行了reject(this.reason)

    你可能会疑惑, 那么reject(this.reason)返回值应该是undefined, 然后又调用了resolve(value)是怎么回事呢?
    这里我们要看前面的代码

    1. let resolve = value => {
    2.     // 如果不是Pending就忽略
    3.     if (this.status !== Pending) {
    4.         return
    5.     }
    6.     this.status = Resolved
    7.     this.value = value
    8.     this.onResolved(value)
    9. }

    在调用完reject之后, 这里的status就变成了Rejected, 这个方法就不会调用了呀

    你可能还会疑惑, 这里的代码

    1. if (value instanceof MyPromise) {
    2.     value.then(resolve, reject)
    3. } else {
    4.     resolve(value)
    5. }

    虽然说你知道返回值是Promise要得出结果, 但这是onRejected返回的值, 为什么第二行要这么写?

    还是老方法, 我们看看NodeJS这个地方怎么实现的

    1. let p = new Promise((resolve, reject) => {
    2.     reject("I rejected the promise")
    3. }).then(null, reason => {
    4.     return new Promise((resolve, reject) => {
    5.         resolve("Hello~")
    6.     })
    7. }).then(value => {
    8.     console.log("Value " + value)
    9. }, reason => {
    10.     console.log("Reason " + reason)
    11. })

    运行结果

    1. Value Hello~

    所以说, 这里需要这么写, 让这个then里返回的Promise对象then方法的onResolved方法直接调用新对象的resolve和reject方法来操作这个新对象

Resolved

如果上面的都能理解了, 那么下面这个elseif块就特别好理解了

  1. else if (this.status === Resolved) {
  2.     return new MyPromise((resolve, reject) => {
  3.         let value = (onResolved === null ? resolve : onResolved)(this.value)
  4.         if (value instanceof MyPromise) {
  5.             value.then(resolve, reject)
  6.         } else {
  7.             resolve(value)
  8.         }
  9.     }
  10. }

Pending

在else块里, 也就是状态是Pending的时候, 需要做的事情几乎和上面的if和elseif块一样

在Promise对象状态是Pending的时候, 不能通过this.value和this.reason获取值, 但是, 我们可以通过设置this.onRejected和this.onResolved这两个函数, 因为当Promise的executor执行完的时候一定会调用这两个函数中的一个, 并且调用它们的时候都会带上value和reason, 所以这里的代码需要这么写

  1. else {
  2.     return new MyPromise((resolve, reject) => {
  3.         this.onResolved = value => {
  4.             let v = (onResolved === null ? resolve : onResolved)(value)
  5.             if (v instanceof MyPromise) {
  6.                 v.then(resolve, reject)
  7.             } else {
  8.                 resolve(v)
  9.             }
  10.         }
  12.         this.onRejected = reason => {
  13.             let v = (onRejected === null ? reject : onRejected)(reason)
  14.             if (v instanceof MyPromise) {
  15.                 v.then(resolve, reject)
  16.             } else {
  17.                 resolve(v)
  18.             }
  19.         }
  20.     })
  21. }

最后加上一个catch方法, 其实就是一个语法糖, 既然ES6都加上了, 那我也加上吧

  1. catch(onRejected) {
  2.     return this.then(null, onRejected)
  3. }

最后的测试

嘿咻, 终于弄完了, 接下来就是实验新对象的时候啦!(这么说好像有点怪怪的呢)

还是文章开头那熟悉的味道

  1. function getAnInt() {
  2.     return new MyPromise((resolve, reject) => {
  3.         setTimeout(() => {
  4.             resolve(81)
  5.         }, 500)
  6.     })
  7. }
  9. function sqrt(n) {
  10.     return new MyPromise((resolve, reject) => {
  11.         setTimeout(() => {
  12.             let res = Math.sqrt(n)
  13.             if (parseInt(res) === res) {
  14.                 resolve(res)
  15.             } else {
  16.                 reject("cannot get an int")
  17.             }
  18.         }, 500)
  19.     })
  20. }
  23. getAnInt().then(v1 => {
  24.     console.log(v1)
  25.     return sqrt(v1)
  26. }).then(v2 => {
  27.     console.log(v2)
  28.     return sqrt(v2)
  29. }).then(v3 => {
  30.     console.log(v3)
  31.     return sqrt(v3)
  32. }).then(v4 => {
  33.     console.log(v4)
  34. }).catch(err => {
  35.     console.log("Error " + err)
  36. })

结果

  1. 81
  2. 9
  3. 3
  4. Error cannot get an int

附: 全代码

  1. const Pending  = 'pending'
  2. const Resolved = 'resolved'
  3. const Rejected = 'rejected'
  5. class MyPromise {
  6.     constructor(executor) {
  7.         // 状态
  8.         this.status = Pending
  9.         // 正常运行返回的结果
  10.         this.value = null
  11.         // 发生错误的原因
  12.         this.reason = null
  13.         // 见 注1
  14.         this.onRejected = () => {}
  15.         this.onResolved = () => {}
  16.         
  17.         let resolve = value => {
  18.             // 如果不是Pending就忽略
  19.             if (this.status !== Pending) {
  20.                 return
  21.             }
  22.             this.status = Resolved
  23.             this.value = value
  24.             this.onResolved(value)
  25.         }
  27.         let reject = reason => {
  28.             // 如果不是Pending就忽略
  29.             if (this.status !== Pending) {
  30.                 return
  31.             }
  32.             this.status = Rejected
  33.             this.reason = reason
  34.             this.onRejected(reason)
  35.         }
  36.         // 见 注2
  37.         executor(resolve, reject)
  38.     }
  40.     then(onResolved, onRejected) {
  41.         let funcOrNull = f => typeof f === "function" ? f : null
  42.         onResolved = funcOrNull(onResolved)
  43.         onRejected = funcOrNull(onRejected)
  45.         if (this.status === Rejected) {
  46.             return new MyPromise((resolve, reject) => {
  47.                 let value = (onRejected === null ? reject : onRejected)(this.reason)
  48.                 if (value instanceof MyPromise) {
  49.                     value.then(resolve, reject)
  50.                 } else {
  51.                     resolve(value)
  52.                 }
  53.             })
  54.         } else if (this.status === Resolved) {
  55.             return new MyPromise((resolve, reject) => {
  56.                 let value = (onResolved === null ? resolve : onResolved)(this.value)
  57.                 if (value instanceof MyPromise) {
  58.                     value.then(resolve, reject)
  59.                 } else {
  60.                     resolve(value)
  61.                 }
  62.             })
  63.         } else {
  64.             return new MyPromise((resolve, reject) => {
  65.                 this.onResolved = value => {
  66.                     let v = (onResolved === null ? resolve : onResolved)(value)
  67.                     if (v instanceof MyPromise) {
  68.                         v.then(resolve, reject)
  69.                     } else {
  70.                         resolve(v)
  71.                     }
  72.                 }
  74.                 this.onRejected = reason => {
  75.                     let v = (onRejected === null ? reject : onRejected)(reason)
  76.                     if (v instanceof MyPromise) {
  77.                         v.then(resolve, reject)
  78.                     } else {
  79.                         resolve(v)
  80.                     }
  81.                 }
  82.             })
  83.         }
  84.     }
  86.     catch(onRejected) {
  87.         return this.then(null, onRejected)
  88.     }
  89. }
  91. // 测试模块!
  92. function getAnInt() {
  93.     return new MyPromise((resolve, reject) => {
  94.         setTimeout(() => {
  95.             resolve(81)
  96.         }, 500)
  97.     })
  98. }
  100. function sqrt(n) {
  101.     return new MyPromise((resolve, reject) => {
  102.         setTimeout(() => {
  103.             let res = Math.sqrt(n)
  104.             if (parseInt(res) === res) {
  105.                 resolve(res)
  106.             } else {
  107.                 reject("cannot get an int")
  108.             }
  109.         }, 500)
  110.     })
  111. }
  114. getAnInt().then(v1 => {
  115.     console.log(v1)
  116.     return sqrt(v1)
  117. }).then(v2 => {
  118.     console.log(v2)
  119.     return sqrt(v2)
  120. }).then(v3 => {
  121.     console.log(v3)
  122.     return sqrt(v3)
  123. }).then(v4 => {
  124.     console.log(v4)
  125. }).catch(err => {
  126.     console.log("Error " + err)
  127. })

参考: https://zhuanlan.zhihu.com/p/21834559
https://zhuanlan.zhihu.com/p/183801144

原文链接：http://www.cnblogs.com/nekodaisuki/p/14401427.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号