摘要:异步模式编程有四种方法回调函数最基本的方法,把写成的回调函数事件监听为绑定事件,当发生某个事件,就执行发布订阅,以及本文要介绍的对象。它的思想是,每一个异步任务返回一个对象,该对象有一个方法,允许指定回调函数。
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~
本文由前端林子发表于云+社区专栏
Promise是CommonJS提出的一种规范,在ES6中已经原生支持Promise对象,非ES6环境可以用Bluebird等库来支持。
0.引入在js中任务的执行模型有两种:同步模式和异步模式。
同步模式:后一个任务B等待前一个任务A结束后,再执行。任务的执行顺序和任务的排序顺序是一致的。
异步模式:每一个任务有一个或多个回调函数,前一个任务A结束后,不是执行后一个任务B,而是执行任务A的回调函数。而后一个任务B是不等任务A结束就执行。任务的执行顺序,与任务的排序顺序不一致。
异步模式编程有四种方法:回调函数(最基本的方法,把B写成A的回调函数)、事件监听(为A绑定事件,当A发生某个事件,就执行B)、发布/订阅,以及本文要介绍的Promise对象。
Promise是一个用于处理异步操作的对象,可以将回调函数写成链式调用的写法,让代码更优雅、流程更加清晰,让我们可以更合理、更规范地进行异步处理操作。它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。
1.Promise的基本知识 1.1 三种状态Pending:进行中,刚创建一个Promise实例时,表示初始状态;
resolved(fulfilled):resolve方法调用的时候,表示操作成功,已经完成;
Rejected:reject方法调用的时候,表示操作失败;
1.2 两个过程这三种状态只能从pendeng-->resolved(fulfilled),或者pending-->rejected,不能逆向转换,也不能在resolved(fulfilled)和rejected之间转换。并且一旦状态改变,就不会再改变,会一直保持这个结果。
汇总上述,创建一个Promise的实例是这样的:
//创建promise的实例 let promise = new Promise((resolve,reject)=>{ //刚创建实例时的状态:pending if("异步操作成功"){ //调用resolve方法,状态从pending变为fulfilled resolve(); }else{ //调用reject方法,状态从pending变为rejected reject(); } });1.3 then()
用于绑定处理操作后的处理程序,分别指定fulfilled状态和rejected状态的回调函数,即它的参数是两个函数,第一个用于处理操作成功后的业务,第二个用于处理操作失败后的业务。
//then() promise.then((res)=> { //处理操作成功后的业务(即Promise对象的状态变为fullfilled时调用) },(error)=> { //处理操作失败后的业务(即Promise对象的状态变为rejected时调用) });1.4 catch()
用于处理操作异常的程序,catch()只接受一个参数
//catch() promise.catch((error)=> { //处理操作失败后的业务 });
一般来说,建议不要在then()里面定义rejected状态的回调函数,而是将then()用于处理操作成功,将catch()用于处理操作异常。因为这样做可以捕获then()执行中的错误,也更接近同步中try/catch的写法:
//try-catch // bad promise.then((res)=> { //处理操作成功后的业务 }, (error)=> { //处理操作失败后的业务 }); // good promise .then((res)=> { //处理操作成功后的业务 }) .catch((error)=> { //处理操作失败后的业务 });1.5 all()
接受一个数组作为参数,数组的元素是Promise实例对象。只有当参数中的实例对象的状态都为fulfilled时,Promise.all( )才会有返回。
实例代码(可直接在浏览器中打开):
Promise实例
结果(注意看时间):
Promise.all()
代码说明:
1s后,promise2进入fulfilled状态,间隔2s,也就是3s后,promise1也进入fulfilled状态。这时,由于两个实例都进入了fulfilled状态,所以Promise.all()才进入了then方法。
使用场景:执行某个操作需要依赖多个接口请求回的数据,且这些接口之间不存在互相依赖的关系。这时使用Promise.all(),等到所有接口都请求成功了,它才会进行操作。1.6 race()
和all()的参数一样,参数中的promise实例,只要有一个状态发生变化(不管是成功fulfilled还是异常rejected),它就会有返回,其他实例中再发生变化,它也不管了。
实例代码(可直接在浏览器中打开):
Promise实例
结果(注意看时间):
Promise.race()
代码说明:
1s后,promise2进入rejected状态,由于一个实例的状态发生了变化,所以Promise.race()就立刻执行了。
2 实例平时开发中可能经常会遇到的问题是,要用ajax进行多次请求。例如现在有三个请求,请求A、请求B、请求C。请求C要将请求B的请求回来的数据做为参数,请求B要将请求A的请求回来的数据做为参数。
按照这个思路,我们可能会直接写出这样的层层嵌套的代码:
//------请求A 开始--------- $.ajax({ success:function(res1){ //------请求B 开始---- $.ajax({ success:function(res2){ //----请求C 开始--- $.ajax({ success:function(res3){ } }); //---请求C 结束--- } }); //------请求B 结束----- } }); //------请求A 结束---------
在请求A的success后,请求B发送请求,在请求B 的success后,请求C发送请求。请求C结束后,再向上到请求B结束,请求B结束后,再向上到请求A结束。
这样虽然可以完成任务,但是代码层层嵌套,代码可读性差,也不便于调试和后续的代码维护。而如果用Promise,你可以这样写(示意代码,无ajax请求):
此处附上完整可执行代码,可在浏览器的控制台中查看执行结果:
Promise实例
结果如下:
实例
可以看出请求C依赖请求B的结果,请求B依赖请求A的结果,在请求A中是使用了return将需要的数据返回,传递给下一个then()中的请求B,实现了参数的传递。同理,请求B中也是用了return,将参数传递给了请求C。
3.小结本文主要介绍了Promise对象的三个状态和两个过程。“三个状态”是:初始化、操作成功、操作异常,“两个过程”是初始化状态到操作成功状态,和初始化状态到操作异常状态。除此之前,还有两种实例方法:then()、catch()来绑定处理程序。类方法:Promise.all()、Promise.race()。如有问题,欢迎指正。
相关阅读
【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识
此文已由作者授权腾讯云+社区发布,更多原文请点击
搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!
海量技术实践经验,尽在云加社区!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99081.html
摘要:我曾写过一篇关于博客个最佳特性,这次我打算聊聊和特性。自从年双十一正式上线,累计处理了亿错误事件,得到了金山软件百姓网等众多知名用户的认可。 译者按: 转眼ES6发布2年了,是时候了解一下ES7与ES8特性了! 原文: ES7 and ES8 Features 译者: Fundebug 为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改。另外,本文版权归原作者所有...
前言 Promise 的基本使用可以看阮一峰老师的 《ECMAScript 6 入门》。 我们来聊点其他的。 回调 说起 Promise,我们一般都会从回调或者回调地狱说起,那么使用回调到底会导致哪些不好的地方呢? 1. 回调嵌套 使用回调,我们很有可能会将业务代码写成如下这种形式: doA( function(){ doB(); doC( function(){ ...
摘要:什么是是异步编程的一种解决方案,比传统的解决方案回调函数和事件更合理和更强大。函数可以将状态转变为状态。对象通过方法来添加回调函数。当发生错误的时候可以通过方法,来定义回调函数。接受数组作为参数传入,每个元素都是一个对象。 大家周末好,要说最近几年什么语言大红大紫,当属JavaScript了。话说虽然是10天就创造出的语言,但是人家能文能武。web前端自然不必多说了,各种框架你方登罢我...
摘要:上次我们聊过了前端监控执行错误和第三方资源加载异常的监控,那么这次来聊聊如何捕获错误。首先先安利下自己做的报错监控的项目欢迎和。使用对事件进行监听即可捕捉到未被的错误。 上次我们聊过了前端监控 JS 执行错误和第三方资源加载异常的监控,那么这次来聊聊如何捕获 Promise 错误。 首先先安利下自己做的报错监控的项目 FE-Monitor 欢迎 issue 和 star 。 Promi...
摘要:所以本文将介绍两个目前常用的获取服务器数据的库和。随着作者尤雨溪发布消息,不再继续维护并推荐大家使用开始,进入了很多人的目光。脱离了,是基于设计。如果要详细了解的应用,推荐阅读教程和规范。欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏 随着前端技术的发展,请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后...
阅读 1401·2021-11-15 11:38
阅读 3535·2021-11-09 09:47
阅读 1950·2021-09-27 13:36
阅读 3188·2021-09-22 15:17
阅读 2525·2021-09-13 10:27
阅读 2843·2019-08-30 15:44
阅读 1136·2019-08-27 10:53
阅读 2683·2019-08-26 14:00