Promise的使用及原理
此文章主要讲解核心思想和基本用法,想要了解更多细节全面的使用方式,请阅读官方API 这篇文章假定你具备最基本的异步编程知识,例如知道什么是回调,知道什么是链式调用,同时具备最基本的单词量,例如page、user、promise、then、resovle、reject、pay、fix、order等等,如果你对这些单词非常陌生,那么你需要先花点时间补充一下你的英语
什么是异步操作?
所谓异步操作,指的是可以跟当前程序同时执行的操作。举例:
$("#page").scrolltop(0 ,1000); //使用1秒钟时间将页面滚动至顶部
$("#nav-float").hide (1000); //使用1秒钟时间将悬浮导航栏隐藏
只要你稍微有点异步编程经验,就应该知道,这两个方法会同时完成。
它们的编写顺序并不会影响它们的执行顺序
//异步操作的特点就是,不会打断当前程序的执行//getUsers请求发出后,会立刻向下继续执行第二个请求
ajax("/getUsers",function(data) {//回掉函数会在请求成功后调用
})
//resumelist请求会立刻开始,无论getUsers是否结束
ajax("/resumelist", function(data) {})
//至于哪一个ajax先返回结果并执行回调函数,从代码的编写顺序上是无法确定的。
我们可以给异步操作做一个简单的定义
当一个操作开始执行后,主程序无需等待它的完成,可以继续向下执行。此时该操作可以跟主程序同时(并发)执行。这种操作我们就称之为异步操作。 通常当操作完成时,会执行一个我们事先设定好的回调函数来做后续的处理。
我们常见的异步操作例如:
添加定时器 setTimeout/setInterval
执行某个动画 animate
发起网络请求 request
异步会带来什么问题?
比如我们现在有两个动画,需要按顺序来执行,也就是第一个结束,第二个才能开始 这个时候可能有点麻烦,传统的解决方法是通过回调:
animateA(function( ){animateB( );
})
这种方案显然不太好,如果有很多异步操作需要顺序执行,就会产生所谓的“回调地狱”
ajaxA(function( ){ajaxB(function( ){ajaxC(function( ){ajaxD(function( ){...... }); }); });
})
这种代码不管是写起来还是读起来都比较烦人。
我们来看下经过Promise改造后的样子(伪代码)
newPromise(ajaxA).then(ajaxB).then(ajaxC).then(ajaxD);
Promise的使用及原理
要熟练Promise的的使用,你必须要先搞懂它解决问题的原理 贴一段实际的Promise代码,你来感受一下先:
newPromise(resolve=>{ajax("/pay/post", data=>resolve() );
}).then(resolve=>{ajax("/order/fix", data=>{//处理数据 })
})
上面的代码使用了ES6的箭头函数,虽然大大简化了代码的写法,
但对于初级程序猿来讲极不友好
读这种代码简直跟读金刚经差不多。
我们把代码还原成ES5的样子
newPromise(function(resolve){ajax("/pay/post",function(data){resolve();})
}).then(function(){ajax("/order/fix",function(data){})
})
接下来,我们就按照费曼技巧来一步步的学习Promise是如何解决问题的
问题1, 作为一个异步函数,尤其像ajax这种网络请求,连我自己都不能确定函数的执行时间,Promise是怎么知道第一个函数什么时候结束的? 然后再开始执行下一个?
Promise并没有那么神奇,它并不能知道我们的函数什么时候结束,
你注意到上面代码中的第3行了吗
在ajax请求结束执行回调的时候,
我们调用了一个resolve()函数,这句代码非常的关键.
这其实就是在通知Promise,当前这个函数结束啦,
你可以开始执行下一个。 这时Promise就会去执行then里面的函数了。
问题2, 所以按照你的意思,如果我不调用这个方法,Promise就不知道这个函数有没有结束,那么then里面的函数就不会执行,也就是说我的第二个请求就永远不会发送了呗?
Bingo!! 恭喜你已经学会了逻辑推理+抢答。
问题3, 可是这个resolve函数是从哪来的? 需要我自己定义吗? 从代码上看它好像是个参数,那又是谁传入函数中的?
你得先弄明白Promise的基本结构
newPromise(函数1).then(函数2);我们把函数1和函数2都以参数形式传给了一个Promise对象,
所以接下来函数1和2都会由这个Promise对象控制,
简单的说,函数1和函数2都会由Promise对象来执行。
所以在函数1执行时,参数也当然是由Promise对象传递进去的。newPromise(function(resolve){//resolve是Promise对象在调用函数时传入的参数
}).then(函数2);
问题4, Promise对象为啥要在执行第1个任务的时候,把这个resolve函数 传进来,有什么目的?
你说呢?
废屁,知道还用问你?
真是猪脑子,刚才不是已经说了吗?
Promise对象没办法知道我们的异步函数啥时候结束。
那我来问你, 如果你去车站接人,
可是你又不知道对方何时下车,你会咋办?
把我电话号码给他,快到了打我电话呗
没错,Promise解决问题也采用了同样的思路。
它传进来的resolve函数, 就好像一个对讲机,
当我们的异步任务要结束时,通过对讲机 来通知Promise对象。
也就是调用resolve方法newPromise(function(resolve){ajax("/pay/post",function(data){//当请求结束时,通过调用resolve方法,通知Promise对象,该任务已完成resolve(); //收到通知后,Promise会立刻开始函数2的执行})
}).then(函数2);
懂了,所以这个resolve函数,必须在异步任务的最后调用(例如ajax的回调方法),相当于告诉Promise对象,该任务结束,请开始下一个。
完全正确
问题5, 所以Promise也不过如此嘛,它没有带来什么功能上的革命性变化, 因为使用传统的回调嵌套的方式,同样可以完成效果。 说白了它就是编码方式上的改进??
基本是这样的,但Promise带来的编码方式以及异步编程思路上的进步是非常巨大的。
问题6, 那如果我有ajaxA、ajaxB、ajaxC三个异步任务,想按照先A后B再C的顺序执行,像这样写行吗?
newPromise(function(resolve){ajax("/AAA", function(){resolve(); //通知Promise该任务结束})
}).then(function(resolve){ajax("/BBB", function(){resolve();//通知Promise该任务结束})
}).then(function(){ajax("/CCC", function(){ //.... })
})
上面的这种写法是不对的。
Promise的中文含义是“承诺”,
则意味着,每一个Pormise对象,代表一次承诺
而每一次承诺,只能保证一个任务的顺序,也就是说
newPromise(A).then(B); 这句话表示, 只能保证A和B的顺序一旦A执行完,B开始后,这次承诺也就兑现了,Promise对象也就失效了
那如果还有C呢? 我们就必须在函数B中,
重新创建新的Promise对象,来完成下一个承诺,具体的写法就像这样:newPromise(函数1(resolve){ajaxA("xxxx", function(){resolve();//通知Promise该任务结束})
}).then(函数2(){//在函数2开始运行后,第一次创建的Promise对象完成使命,已经不能再继续工作。//此时,我们创建并返回了新的Promise对象returnnewPromise(function(resolve){ajaxB("xxxx", function(){resolve();//通知新的Promise对象该任务结束}) })
}).then(函数3(){ //尽管这里使用了链式调用,但负责执行函数3的,已经是新的Promise对象了// 如果,我们还有ajaxD需要顺序调用// 那就必须在这里重新new Promise()对象了ajaxC("xxx", function(){ })
})
问题7, 懂了,那Promise还有什么其它强大的功能吗?
有啊,例如: 如果我有 A,B,C 三个异步任务,ABC同时开始执行
当A,B,C三个任务全部都结束时,执任务D,
传统方法实现起来就比较复杂,Promise就非常简单,就像这样:Promise.all([newPromise(A), newPromise(B), newPromise(C)])
.then(function(){D();
});
问题8, 那如果我希望A,B,C 其中任意一个任务完成, 就马上开始任务D,该怎么做?
Promise.race([newPromise(A), newPromise(B), newPromise(C)])
.then(function(){D();
});
相关文章:
Promise的使用及原理
此文章主要讲解核心思想和基本用法,想要了解更多细节全面的使用方式,请阅读官方API 这篇文章假定你具备最基本的异步编程知识,例如知道什么是回调,知道什么是链式调用,同时具备最基本的单词量,例如page、us…...
怎么拥有一个帅气的 CMD 命令窗口 ❓ - Windows
自从拥有这样一个炫酷的命令窗口,我都舍不得关掉它了 关于我为什么我要闲的去 “打扮” 一个命令窗口,这要从星期五下午的一场 摸鱼 🐠 开始,当时我要创建一个 vue ts vite 的项目练练手,为新项目开始做准备&#x…...
时隔多年再学习Vuex,什么?原来如此简单!
时隔多年再学习Vuex,什么?原来如此简单! start 写 Vue 写了好多年了,少不了和 Vuex 打交道。虽然使用它的次数非常频繁,但是潜意识里总觉得这东西很难,导致遇到与之相关的问题就容易慌张。时至今日,升级版…...
Linux笔记_gcc
Linux_gcc程序的翻译链接库make与makefile关于gcc的一些笔记。 程序的翻译 gcc/g是一个编译器。 预处理:头文件展开、条件编译、宏替换、去注释 编译:C语言汇编语言 汇编:汇编->可重定位目标二进制文件,不可以被执行࿰…...
2023美赛MCM A题 详细思路
2023美赛(MCM/ICM)如期开赛,为了尽早的帮大家确定选题。这里我们加急为大家编辑出A赛题详细思路,方便大家快速对A题目的难度有个大致的了解。同时,我们也给出了A题目简要的解题思路,以及该问题在实际解决中可能会遇到的难点。A题的…...
c#: NetTopologySuite凹凸多边形计算
环境: .net 6.0NetTopologySuite 2.5.0vs2022平面二维 一、夹角计算 1.1 计算向量与x轴正方向的夹角 方法: AngleUtility.Angle(Coordinate p) 下图上的t2即为p,之所以这么写是为了和AngleUtility.AngleBetweenOriented做比较 注意: 结果…...
NFT Insider #86:A16z 领投,YGG 获得 1380 万美元融资,The Sandbox与《北斗神拳》合作
引言:NFT Insider由NFT收藏组织WHALE Members、BeepCrypto联合出品,浓缩每周NFT新闻,为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周报将从NFT市场数据,艺术新闻类,游戏新闻类,虚拟世界类&#…...
Sort_Algorithm
排序算法前言插入排序折半插入排序希尔排序冒泡排序快速排序选择排序堆排序归并排序前言 排序算法:将一堆数据元素按关键字递增或者递减的顺序,进行排序。 排序算法的评价指标:时间复杂度,空间复杂度,算法稳定性。 算…...
【初探人工智能】2、雏形开始长成
【初探人工智能】2、雏形开始长成【初探人工智能】2、雏形开始长成安装Flask封装Web接口雏形设置接收参数功能验证聊天写代码代码补全生成图片写在后面笔者初次接触人工智能领域,文章中错误的地方还望各位大佬指正! 【初探人工智能】2、雏形开始长成 在…...
【LeetCode】剑指 Offer(2)
目录 写在前面: 题目: 题目的接口: 解题思路: 代码: 过啦!!! 写在最后: 写在前面: 今天的每日一题好难,我不会dp啊啊啊啊啊啊。 所以&am…...
【JavaSE】Lambda、Stream(659~686)
659.每天一考 1.写出获取Class实例的三种常见方式 Class clazz1 String.class; Class clazz2 person.getClass(); //sout(person); //xxx.yyy.zzz.Person... Class clazz3 Class.forName(String classPath);//体现反射的动态性2.谈谈你对Class类的理解 Class实例对应着加载…...
有限差法(Finite Difference)求梯度和Hessian Matrix(海森矩阵)的python实现
数学参考 有限差方法求导,Finite Difference Approximations of Derivatives,是数值计算中常用的求导方法。数学上也比较简单易用。本文主要针对的是向量值函数,也就是f(x):Rn→Rf(x):\mathbb{R^n}\rightarrow \mathbb{R}f(x):Rn→R当然&…...
day33 贪心算法 | 1005、K次取反后最大化的数组和 134、加油站 135、分发糖果
题目 1005、K次取反后最大化的数组和 给定一个整数数组 A,我们只能用以下方法修改该数组:我们选择某个索引 i 并将 A[i] 替换为 -A[i],然后总共重复这个过程 K 次。(我们可以多次选择同一个索引 i。) 以这种方式修改…...
《蓝桥杯每日一题》递推·AcWing 3777. 砖块
1.题目描述n 个砖块排成一排,从左到右编号依次为 1∼n。每个砖块要么是黑色的,要么是白色的。现在你可以进行以下操作若干次(可以是 0 次):选择两个相邻的砖块,反转它们的颜色。(黑变白…...
mysql读写分离(maxscale)
1. 环境架构 需要三台服务器。192.168.2.10(master)192.168.2.20(slave)192.168.2.30(maxscale) 2. 部署mysql主从同步 mysql主从同步可以参考mysql主从同步 3. 部署maxscale服务 MaxScale中间件软件 …...
第八章 - 数据分组( group by , having , select语句顺序)
第八章 - 数据分组 group by数据分组过滤分组 having分组排序groub by语句的一些规定select语句顺序数据分组 在使用group by进行分组时,一般都会配合聚合函数一起使用,实现统计数据的功能。比如下面例子,需要按性别计算人数。按性别进行分组…...
Git(GitHub,Gitee 码云,GitLab)详细讲解
目录第一章 Git 概述1.1 何为版本控制1.2 为什么需要版本控制1.3 版本控制工具1.4 Git 简史1.5 Git 工作机制1.6 Git 和代码托管中心第二章 Git 安装第三章 Git 常用命令3.1 设置用户签名3.2 初始化本地库3.3 查看本地库状态3.3.1 首次查看(工作区没有任何文件&…...
策略模式(Strategy Pattern)
编写鸭子项目,具体要求如下: 1) 有各种鸭子(比如 野鸭、北京鸭,水鸭等,鸭子有各种行为,比如 叫,飞行等) 2)显示鸭子的信息 传统方案解决鸭子问题 1࿰…...
《Qt6开发及实例》6-2 Qt6基础图形的绘制
目录 一、绘图框架设计 二、绘图区的实现 2.1 PaintArea类 2.2 PaintArea类讲解 三、主窗口的实现 3.1 MainWidget类 3.2 MainWidget类讲解 3.3 槽函数编写 3.5 其他内容 一、绘图框架设计 界面 两个类 二、绘图区的实现 2.1 PaintArea类 paintarea.h #ifndef…...
LeetCode 382. 链表随机节点
原题链接 难度:middle\color{orange}{middle}middle 题目描述 给你一个单链表,随机选择链表的一个节点,并返回相应的节点值。每个节点 被选中的概率一样 。 实现 SolutionSolutionSolution 类: Solution(ListNodehead)Solution…...
iOS开发AppleDeveloper中给别人授权开发者权限后,对方一直显示不了我的开发账号team
在iOS开发经常出现多人协作开发的情况。这时我们通常要发邮件邀请别的用户为开发者或者app管理就可以开发我们自己的项目了。但是这次我给别人授权开发者权限后,发现别人权限中没有证书相关权限如图:并且别人登录该账号后,在xcode中只有一个看…...
FreeRTOS数据类型和编程规范
目录 数据类型 变量名 函数名 宏的名 数据类型 每个移植的版本都含有自己的portmacro.h头文件,里面定义了2个数据类型 TickType_t FreeRTOS配置了一个周期性的时钟中断:Tick Interrupt每发生一次中断,中断次数累加,这被称为t…...
【python知识】win10下如何用python将网页转成pdf文件
一、说明 本篇记录一个自己享用的简单工具。在大量阅读网上文章中,常常遇到一个专题对应多篇文章,用浏览器的收藏根本不够。能否见到一篇文章具有搜藏价值,就转到线下,以备日后慢慢消化吸收。这里终于找到一个办法,将在…...
C语言常见关键字
写在前面 这个博客是结合C语言深度解剖这本书和我以前学的知识综合而成的,我希望可以更见详细的谈一下C语言的关键字,内容有点多,有错误还请斧正. 常见关键字 下面我们说下C语言的关键字,所谓的关键字是指具有特定功能的单词,我们可以使用关键字来帮助我们完成不同的事物.C语…...
【MT7628】固件开发-SDK4320添加MT7612E WiFi驱动操作说明
解压5G WiFi MT7612E驱动1.1解压指令 tar -xvf MT76x2E_MT7620_LinuxAP_V3.0.4.0_P2_DPA_20160308.tar.bz2 1.2解压之后会出现以下两个目录 rlt_wifi rlt_wifi_ap 1.3将解压后的文件拷贝到系统下 拷贝路径 RT288x_SDK/source/linux-2.6.36.x/drivers/net/wireless 内核中打开驱…...
如何从手工测试进阶自动化测试?阿里10年测开经验分享...
随着行业的竞争加剧,互联网产品迭代速度越来越快,QA 与测试工程师都需要在越来越短的测试周期内充分保证质量。可是,App 测试面临着很多挑战,比如多端发布、多版本发布、多机型发布等等,导致了手工测试很难完全胜任。因…...
C++复习笔记11
1. vector是表示可变大小数组的序列容器。 2. 就像数组一样,vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问,和数组一样高效。但是又不像数组,它的大小是可以动态改变的,而且它的大小会被…...
【MT7628】固件开发-SDK4320添加MT7628 WiFi驱动操作说明
解压2.4G WiFi MT7628驱动1.1解压指令 tar -xvf MT7628_LinuxAP_V4.1.0.0_DPA_20160310.tar.bz2 1.2解压之后会出现以下两个目录 mt_wifi mt_wifi_ap 1.3将解压后的文件拷贝到系统下 拷贝路径 RT288x_SDK/source/linux-2.6.36.x/drivers/net/wireless 内核中打开驱动编译修改R…...
C#开发的OpenRA游戏加载界面的实现
C#开发的OpenRA游戏加载界面的实现 游戏的UI是一个游戏必备, 但是游戏的UI都是自己处理的,不能使用像Windows自带的UI。 这样游戏的UI,其实也是使用游戏的方式来显示的, 只不过使用了低帧率的方式来显示。 比如OpenRA游戏界面,就会显示如下: 游戏的界面有很多,先从一个简…...
渲染农场优势是什么_云渲染农场怎么用?
在回答渲染农场的优势这个问题之前,我先申明一下本文中提到的渲染农场/云渲染平台/云渲染农场,都特指CG领域内的专业3D渲染平台,有一些文章会强调这个叫法的区别,但是业内一般都不会分这么细,所以也就不赘述了。渲染农…...
网站建设论文伯乐在线/公众号推广引流
2019独角兽企业重金招聘Python工程师标准>>> 对于请求头Content-Type,默认application/x-www-form-urlencoded。 1、(可用) CloseableHttpClient client HttpClients.createDefault(); // 实例化一个post对象 Ht…...
做夹具需要知道的几个网站/发布信息的免费平台有哪些
展示图: 首先是配置 gzh.appid公众号appid wxPay.mchId商户号 wxPay.key支付密钥 wxPay.notifyUrl域名回调地址 常量: /**微信支付统一下单接口*/public static final String unifiedOrderUrl "https://api.mch.weixin.qq.com/pay/unifiedorder…...
网站备案抽查号码/手机端关键词排名免费软件
去掉EnableWebMvc 注解 ,相关原因请看原博文 https://blog.csdn.net/testcs_dn/article/details/80249894转载于:https://www.cnblogs.com/0kuxia0/p/9605436.html...
b/s网站开发/焊工培训ppt课件
上节探讨了Spring IOC容器中getBean方法,下面我们将自行编写测试用例,深入跟踪分析bean对象创建过程。 测试环境创建 测试示例代码如下: package org.springframework.context.mytests;import org.junit.Test; import org.springframework.co…...
web做网站作业/网站管理工具
W5sHTML5中文学习网 - HTML5先行者学习网//remove the utf-8 boms W5sHTML5中文学习网 - HTML5先行者学习网//by magicbug at gmail dot com W5sHTML5中文学习网 - HTML5先行者学习网if (isset($_GET[dir])){ //config the basedir W5sHTML5中文学习网 - HTML5先行者学习网$bas…...
安阳网站建设哪家好/策划是做什么的
在程序员的世界中,一切重复性的工作,都应该通过程序自动执行。 「自动化测试」就是一个最好的例子。 随着互联网应用开发周期越来越短,迭代速度越来越快,只会点点点,不懂开发的手工测试,已经无法满足如今的…...