如何避免回调地狱?快使用ES6的Promise对象

Promise的中文释义为“承诺”,ES6中的Promise是一个对象,用来按照一定的逻辑进行异步操作,并且传递相应的消息

1.Promise的规范
a.Promise对象有三种状态:Pending(进行中)、Resolved(已完成)、Rejected(已失败),这三种状态只能从Pending到Resolved或者从Pending到Rejected,不能逆向转换,且转换完成之后,不能再改变
b.Promise对象的关键是对then()方法的实现,then方法接受两个参数,第一个是状态是成功时的回调函数,另一个是状态是失败时的回调函数

2.Promise对象的用法
在这里插入图片描述
从上面的代码可以看出,实例化了一个Promise对象,传递一个函数作为参数,而这个函数又传递了两个参数resolve和reject,这两个参数不是必须的,这两个参数都是函数,resolve为异步操作执行成功后的回调函数,reject为失败后的回调函数,then方法(见下面分析)会接受resolve传递的实参
当然上面的写法是有明显的问题的,由于是直接实例化了一个对象,所以会直接运行,这往往不是我们想要的,而且也没有说到then的具体用法,所以我们有如下的写法:
在这里插入图片描述
我们创建了一个test函数,此函数返回了一个Promise的实例,test函数执行后,接着调用then方法,也就是test执行完所有的逻辑之后(当状态变成resolved或者rejected之后),再执行then里面的代码。需要注意的是:test里面需要显式地调用resolve或者reject这两个函数,本质上这两个函数就是为了改变Promise的状态,状态改变完成之后,才会告诉then可以执行接下来的代码了。不难看出then其实充当了回调函数的角色,但却是以一种优雅的链式调用方式展现的,这样可以避免回调函数层层嵌套的尴尬写法,让业务逻辑看上去更加简洁明了。
如果在then调用之后还想继续链式调用,只需要在then方法里面返回一个新的Promise对象即可。
接下来我们来看看一个较为完整的Promise写法:
在这里插入图片描述

执行结果为:
在这里插入图片描述
这里来说说捕获异常的问题: 上例中是使用catch进行捕获异常的,catch捕获异常会中断接下来的then执行,比如:如果“第二个业务”出现了异常,则不会执行“第三个业务”;第二种捕获异常的方式是使用then方法的第二个参数(then方法接收两个参数,第一个是成功后的回调,第二个是失败后的回调),这种方式不会阻止接下来的then执行。本人比较推荐catch来捕获异常,因为如上例,三个业务有前后的逻辑关系,如果前面一个发生了错误,后一个也没有执行的必要了。

3.关于all()和race()
all():等待所有异步操作完成之后,再执行回调
在这里插入图片描述

返回的结果是:
在这里插入图片描述
需要注意的是:所有异步操作的结果会以数组的形式传递给then

race():意为竞速,只要有一个异步操作完成,就立即执行then回调
在这里插入图片描述
执行结果为:
在这里插入图片描述

需要注意的是,先完成的异步操作的结果会传递给then,而后完成的则不会传递

4.总结
Promise对象很好地解决了传统回调的层层嵌套问题,让代码更容易理解,让业务逻辑变得更加清晰,所以,不妨用Promise重构一下你的代码吧

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值