JS中的Promise、理解Promise

准备工作

用Promise创建一个ajax
在这里插入图片描述

promise的本质

Promise的本质就也是使用回调函数定义的异步任务结束后所需要执行的任务,只不过这里的回调函数是通过 then 方法传递进去的。还有Promise将回调函数分为了两种,一种是成功的回调onFulfiled和失败的回调onRejected

误区

嵌套使用的方式是使用Promise最常见的错误,借助于Promise then 方法链式调用的特点,尽量保证异步任务扁平化。

then方法

then方法就是为Promise对象添加状态明确后的回调函数,第一个参数是成功回调函数onFulfiled,第二个参数是失败回调函数onRejected。其中第二个参数(失败回调可以省略)。
在这里插入图片描述

then特点

then方法最大的特点是内部也会返回一个Promise对象,而且返回的是一个全新的Promise对象。目的是实现(形成)一个Promise链。通俗的说就是一个承诺过后返回一个新的承诺,每个承诺都会负责一个异步任务,每个异步任务之间没有相互影响。
在这里插入图片描述
每一个then方法实际在为上一个then方法返回的Promise对象添加状态明确过后的回调。这些then方法会一次执行。
在这里插入图片描述
then方法中还可以手动返回一个Promise对象,下一个then方法实际是在为手动返回的那个Promise对象添加状态明确过后的回调。
在这里插入图片描述
then方法中如果返回一个普通的值,则下一个then方法中回调函数接收的参数就是这个返回值。如果没有返回任何值,那默认拿到的就是undefined
在这里插入图片描述

总结

  • Promise对象的then方法会返回一个全新的Promise对象
  • 后面的then方法就是在为上一个then返回的Promise注册回调
  • 前面then方法中回调函数的返回值会作为后面then方法回调的参数
  • 如果回调中返回的是Promise,那后面then方法的回调会等待它的(前面then中回调函数返回的Promise)结束(结束标志是状态的明确)
  • 可以充分利用then的链式调用的特点,避免过度嵌套(回调地域)

Promise中的异常

在这里插入图片描述
方式1:只能捕获到前面一个Promise对象的异常
方式2:catch方式实际是给前面then返回的Promise对象注册失败回调,并不是给第一个Promise对象注册失败回调
区别:因为有Promise链条的存在,同一个Promise链条上,前面Promise对象的异常会一直被往后传递,所以在最后的catch回调中可以捕获到第一个Promise中的异常
总结:在同一个Promise链条上,任何一个异常都会被一直向后传递直至被捕获。所以 这种方式更像是给整个Promise链条注册失败回调

补充:除此之外,还可以在全局对象上注册一个unhandledrejection去处理代码中没有被手动捕获的Promise异常

全局中捕获异常

浏览器当中:
在这里插入图片描述
node当中:
在这里插入图片描述
全局捕获异常的方式不推荐,应该在代码中明确捕获每一个可能的异常

Promise 中常用的静态方法

  • Promise.resolve()
    快速把一个值转换为Promise对象。
    直接返回一个状态会fulfiled(成功)的Promise对象。
    接收的参数就会作为返回的Promise对象所返回的值,就是在该Promise对象onFulfiled回调中拿到的参数就是这个值。
    在这里插入图片描述
    通过Promise.resolve()去包装一个Promise对象,意思是参数就是一个Promise对象,那么返回的就是参数传递的Promise对象本身
特殊情况(仅了解)

下面这种情况:
参数传递的对象,可以被当作Promise对象去执行。
这种带有then方法的对象,可以说是实现了thenable的接口,也就是可以被then的对象。
支持这种对象的原因:
在原生Promise对象还没有普及之前,很多时候都是通过第三方的库去实现的Promise,那如果需要把第三方的Promise对象去转化成原生的Promise就可以借助这样的一个机制,因为在第三方的Promise对象当中也有这样的then方法。这样就可以通过Promise.resolve()把它转成原生的Promise对象。
在这里插入图片描述

  • Promise.reject()
    快速创建一个状态一定是失败的Promise对象。
    参数就是失败的理由、原因。

Promise并行执行

实际情况:开发中通常会遇到需要同时请求多个接口的情况,这些接口之间没有什么相互依赖,最好的选择是同时去请求它们。

  • Promise.all()
    作用:可以将多个Promise合并为一个Promise统一管理
    参数:接收一个数组,数组当中每个成员都是一个Promise对象,每个Promise可以看作异步任务
    返回值:会返回一个全新的Promise对象,当内部所有Promise都完成过后,返回的这个新的Promise对象才会完成。此时这个Promise对象拿到的结果是一个数组,数组中包含每个内部Promise对象(异步任务)执行的结果
    异常:如果其中任何一个任务执行失败,则返回的Promise就会以失败结束
    在这里插入图片描述
    串行、并行两种方式混用
    在这里插入图片描述
  • Promise.race()
    作用:可以将多个Promise合并为一个Promise统一管理
    参数:接收一个数组,数组当中每个成员都是一个Promise对象,每个Promise可以看作异步任务
    返回值:会返回一个全新的Promise对象,只要当内部某个Promise完成,返回的这个新的Promise对象就会完成。即 只等待内部第一个结束的任务完成便返回完成结束。此时这个Promise对象拿到的结果是第一个完成的Promise对象(异步任务)执行的结果
    案例 实现500ms请求限制
    ajax请求超时控制的一种方式
    在这里插入图片描述
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值