壹 ❀ 引

一个思路搞定三道Promise并发编程题,手摸手教你实现一个Promise限制器一文中,我们在文章结尾留了一个疑问,关于第三题的实现能否解决当每次调用时间都不相等的情况(比如第二次调用要早于第一次调用结束),那么最终得到的结果顺序还能与参数顺序保持一致问题?在分享我踩坑过程中其实已经证明是可以满足这种场景的,但为什么呢?

我们可以尝试运行下面代码,你会发现尽管输出顺序不对,但每次indexvalue都是正确的配队关系:

  1. const time = [1, 3, 4, 2, 1];
  2. // 假设请求API为
  3. function request(params) {
  4. return new Promise((resolve, reject) => {
  5. setTimeout(() => resolve(params), time[Math.floor(Math.random() * 5)] * 1000);
  6. });
  7. }
  8. // 最多处理3个请求的调度器
  9. function Scheduler(list = [], limit = 3) {
  10. let count = 0;
  11. // 用于统计成功的次数
  12. let resLength = 0;
  13. // 浅拷贝一份,原数据的length我们还有用
  14. const pending = [...list];
  15. const resList = [];
  16. // 一定得返回一个promise
  17. return new Promise((resolve, reject) => {
  18. const run = () => {
  19. if (!pending.length || count >= limit) return;
  20. count++;
  21. const index = list.length - pending.length;
  22. const params = pending.shift();
  23. request(params)
  24. .then((res) => {
  25. console.log('当前index为:', index, '当前结果为:', res);
  26. count--;
  27. resLength++;
  28. // 按index来保存结果
  29. resList[index] = res;
  30. // 全部成功了吗?没有就继续请求,否则resolve(resList)跳出递归;
  31. resLength === list.length ? resolve(resList) : run();
  32. })
  33. .catch(reject) // 有一个失败就直接失败
  34. };
  35. // 遍历,模拟前两次依次调用的动作,然后在run内部控制如何执行
  36. list.forEach(() => run());
  37. })
  38. }
  39. Scheduler([1, 2, 3, 4, 5]).then((res) => console.log('最终结果为:', res)); // 1 2 3 4 5

可以毫不夸张的说,上述代码已经算是一个满足了并发限制器功能的Promise.all了,只要我们去除掉限制部分代码,稍加修改就能分别得到Promise.allPromise.race的实现,但在改写之前我们还是先解释为什么尽管执行顺序不同,为什么结果与参数仍是对应关系的问题,而且我觉得也只剩下这一个稍微有点饶的疑惑点了。

贰 ❀ 执行上下文与闭包

还是模拟下上述代码的执行过程,当forEach遍历调用run时,可以确定的是,如下代码绝对是同步执行完成的,且5次都是同步跑完:

  1. // 获得当前的index
  2. const index = list.length - pending.length;
  3. // 获取当前请求需要的参数
  4. const params = pending.shift();

异步的是request(),你什么时候能执行我不关系,反正一开始我已经把你执行需要的参数成对的给你准备好了。有同学的疑问可能就在于,我也知道这些参数一开始是成对的,那Promise执行顺序被打乱之后,后执行的Promise又怎么知道之前的index是多少呢,这是怎么对应上的?

问题又回到了老生常谈的执行上下文与闭包问题。我们知道代码在执行前都要经历执行上下文创建阶段与执行阶段,而一个函数的执行上下文在它创建时就已经决定了,而不是执行时,这也是典型的静态作用域的概念,比如:

  1. const a = 1;
  2. const fn = () => {
  3. console.log(a);
  4. };
  5. (() => {
  6. const a = 2;
  7. fn();// ???
  8. })();

以上代码fn执行时输出1,这是因为fn的执行上下文在创建时决定,而不是执行时,所以不管你在哪调用它,它能访问的永远是同出一个作用域下的const a = 1,这里就当简单复习下静态作用域的概念。

回到上文我们实现的代码,我们知道request().then()这个调用行为是同步的,异步的是requset内部修改状态的代码,以及状态修改完成后才能执行的.then()所注册的回调函数,注意.then()注册回调的行为是同步的,这一点你一定要搞清楚。

也就是说,在五次同步的run()调用过程中,indexparams在不断的同步生成,.then()也在不断的同步注册回调任务。

还记得javascript中什么是闭包吗?所谓闭包,就是能访问外部函数作用域中自由变量的函数,而此时外部函数很明显就是new Promise(fn)fn,内部函数就是.then()注册的回调函数,自由变量自然就是上面同步生成的index了,而闭包的一大特性就是,即便外部上下文已经销毁,它依旧能访问到当时创建它的执行上下文,以及上下文中的那些自由变量(静态作用域的魅力)。

因此即便run()在不断的执行与销毁,.then()在注册callback时这些回调已经自带了它们后续要执行的上下文,这就像人能在地球生活,是因为地球这个上下文提供了空气,水等物质,而宇航员离开了地球依旧能生存,是因为他们自带了氧气等生活物质,即使他们已不在地球这个上下文了。

假设我们断点查看任意一个Promise执行,你会发现每次执行时都有一个closure作用域,这就是闭包的英文单词:

若你对闭包以及执行上下文有一定疑惑,可以阅读博主这两篇文章:

一篇文章看懂JS闭包,都要2020年了,你怎么能还不懂闭包?

一篇文章看懂JS执行上下文

叁 ❀ 改写实现Promise.all

好了,解释完结果与参数的对应关系后,我们直接改写上述代码,得到我们的PromiseAll,它满足2个特性:

  • 只有所有Promise全部resolve时才会resolve,且结果顺序与参数保持一致。
  • 任意一个失败时直接reject
  1. function PromiseAll(promiseList = []) {
  2. // 用于统计成功的次数
  3. let resLength = 0;
  4. // 浅拷贝一份,原数据的length我们还有用
  5. const pending = [...promiseList];
  6. const resList = [];
  7. // 一定得返回一个promise
  8. return new Promise((resolve, reject) => {
  9. const run = () => {
  10. if (!pending.length) return;
  11. const index = promiseList.length - pending.length;
  12. const promise = pending.shift();
  13. promise.then((res) => {
  14. resLength++;
  15. // 按index来保存结果
  16. resList[index] = res;
  17. // 全部成功了吗?没有就继续请求,否则resolve(resList)跳出递归;
  18. resLength === promiseList.length ? resolve(resList) : run();
  19. })
  20. .catch(reject) // 有一个失败就直接失败
  21. };
  22. // 遍历,模拟前两次依次调用的动作,然后在run内部控制如何执行
  23. promiseList.forEach(() => run());
  24. })
  25. }

执行如下代码,你会发现结果完全符合预期:

  1. const P1 = new Promise((resolve, reject) => {
  2. setTimeout(() => resolve(1), 3000)
  3. });
  4. const P2 = new Promise((resolve, reject) => {
  5. setTimeout(() => resolve(2), 1000)
  6. });
  7. const P3 = new Promise((resolve, reject) => {
  8. setTimeout(() => resolve(3), 2000)
  9. });
  10. PromiseAll([P1, P2, P3]).then((res) => console.log('最终结果为:', res)); // 1 2 3 4 5

假设你将上述三个Promise中任意一个的状态改为reject,最终Promise也只会得到失败的结果,而上述的改写,我们还真的只是去除了限制器的代码,理解起来也非常简单。

肆 ❀ 改写实现Promise.race

race顾名思义就是赛跑,多个Promise第一个执行完状态是啥就是啥,所以针对上面的代码,我们又只需要删除掉resLength === promiseList.length以及递归的相关逻辑即可,直接上代码:

  1. function PromiseRace(promiseList = []) {
  2. // 一定得返回一个promise
  3. return new Promise((resolve, reject) => {
  4. const run = (p) => {
  5. p.then((res) => {
  6. resolve(res);
  7. })
  8. .catch(reject) // 有一个失败就直接失败
  9. };
  10. // 遍历,模拟前两次依次调用的动作,然后在run内部控制如何执行
  11. promiseList.forEach((p) => run(p));
  12. })
  13. }

再运行上面的例子,同样符合预期。

伍 ❀ 总

其实从上篇的文章的题三,到后来的all race的实现,你会发现难度反而是递减的,所以如果你对于这篇文章存在疑虑,我还是建议阅读下前两篇文章:

因两道Promise执行题让我产生自我怀疑,从零手写Promise加深原理理解

一个思路搞定三道Promise并发编程题,手摸手教你实现一个Promise限制器

建议按顺序阅读这三篇文章,我想你对于Promise的理解以及手写,一定会上升一个高度,那么到这里本文结束。

【JS】强化Promise理解,从零手写属于自己的Promise.all与Promise.race的更多相关文章

  1. 史上最完整promise源码手写实现

    史上最完整的promise源码实现,哈哈,之所以用这个标题,是因为开始用的标题<手写promise源码>不被收录 promise自我介绍 promise : "君子一诺千金,承诺 ...

  2. 深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise

    第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...

  3. angular.js的一点理解

    对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...

  4. 奇舞js笔记——第0课——如何写好原生js代码

    摘要 1.好的代码职责要清晰,javscript不要用来操作样式: 2.API要设计的合理:通用性,适度的抽象(数据抽象,过程抽象),可扩展性: 3.效率问题:用好的.合适的算法(前端程序员要把自己当 ...

  5. 一起学习造轮子(一):从零开始写一个符合Promises/A+规范的promise

    本文是一起学习造轮子系列的第一篇,本篇我们将从零开始写一个符合Promises/A+规范的promise,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Pr ...

  6. promise 理解与总结

    对Promise的理解 Promise是异步编程的一种解决方案,可以获取异步操作的消息,避免了地狱回调,它比传统的解决方案回调函数和事件更合理和更强大. 所谓Promise,简单说就是一个容器,里面保 ...

  7. 前端基本知识(三):JS的闭包理解

    JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...

  8. 前端基本知识(三):JS的闭包理解(第一个思考题有错误,已修改)

    JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...

  9. JS页面跳转代码怎么写?总结了5种方法

    我们在建站时有些链接是固定的,比如客服咨询链接,一般是第三方url,如果直接加上去不太专业,那么就想着用站内的页面做跳转,跳转用js比较多,那么JS页面跳转代码怎么写呢?ytkah在网上搜索了一下,大 ...

  10. 37.js----浅谈js原型的理解

    浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面 ...

随机推荐

  1. Chrome/Edge 设置黑色主题

    Chrome chrome://flags/#enable-force-dark Edge edge://flags/#enable-force-dark

  2. html - 多次点击选中页面文字出现蓝色背景的解决方法

    body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; ...

  3. Mongo-关系型VS非关系型

    关系型 vs 非关系型 数据库 表 vs 集合 行 vs 文档 列 vs 成员 主键 vs objectId NoSQL => not only sql 是一种互补关系 BSON <= j ...

  4. [转帖]TCP之Nagle、Cork、Delay ACK(延迟确认)

    https://www.jianshu.com/p/167ba81206fb 参考资料 TCP协议中的Nagle算法 TCP中的Nagle算法 Linux下TCP延迟确认(Delayed Ack)机制 ...

  5. [转帖]三星研发出首个基于存算一体技术的GPU大型计算系统 (收录于存算一体芯片赛道投资融资分析)

    https://zhuanlan.zhihu.com/p/591850021 陈巍谈芯:产业巨头已经打通存算一体技术的落地通道,存算一体技术加快应用部署.与未使用HBM-PIM(HBM-PIM GPU ...

  6. 机器学习从入门到放弃:卷积神经网络CNN(一)

    一.前言 在上一篇中我们使用全连接网络,来构建我们的手写数字图片识别应用,取得了很好的效果.但是值得注意的是,在实验的最后,最后我们无论把 LOSS 优化到如何低,似乎都无法在测试数据集 test d ...

  7. 解决node与npm版本不一致,出现npm WARN npm npm does not support Node.js v15.14.0

    出现node与npm版本不一致 今天我升级了node之后,出现的了如下信息 npm WARN npm You should probably upgrade to a newer version of ...

  8. 【JS 逆向百例】当乐网登录接口参数逆向

    声明 本文章中所有内容仅供学习交流,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 逆向目标 目标:当乐网登录 主页:https://oauth.d.cn ...

  9. # 重要-即时通讯IM开源项目OpenIM关于版本管理及v2.3.0发布计划

    越来越多的客户把OpenIM用到了生产环境,由于新特性持续迭代和bug修复,会涉及到后续的升级方案,为了让大家后续从容应对,本文重点总结OpenIM对未来版本管理的思路和方案.同时,官网对于文档进行了 ...

  10. 从零开始配置 vim(3)—— 键盘映射进阶

    严格意义上来说,快捷键的绑定应该是键盘映射,将某些键映射为另一些键. 在上篇我们介绍了基本的键盘映射操作,知道了如何 :map.:imap.:vmap.:nmap这些命令来映射键盘快捷键.它们很方便, ...