Promise.all和promise.race的应用场景举例
问题描述
为了解决前端异步函数多层嵌套会产生回调地狱问题,以及回调地狱错误不方便捕捉的问题。所以,那些制造规则的大佬们,就在ES6中加入了一个新功能~Promise。本文主要记录一下Promise.all和promise.race的应用场景并举例说明。
关于Promise的基本概念什么的,这里就不赘述了。Promise.all方法 简而言之:
Promise.all( ).then( )
适用于处理多个异步任务,且所有的异步任务都得到结果时的情况。比如:用户点击按钮,会弹出一个弹出对话框,对话框中有两部分数据呈现,这两部分数据分别是不同的后端接口获取的数据。
弹框弹出后的初始情况下,就让这个弹出框处于
数据加载中
的状态,当这两部分数据都从接口获取到的时候,才让这个数据加载中
状态消失。让用户看到这两部分的数据。那么此时,我们就需求这两个异步接口请求任务都完成的时候做处理,所以此时,使用Promise.all方法,就可以轻松的实现,我们来看一下代码写法
代码附上
点开弹出框
打印的结果图
文章图片
Promise.race方法
Promise.race赛跑机制,只认第一名
Promise.race其实使用的并不多,如果真要使用。我们可以提出这样一个需求:
【Promise.all和promise.race的应用场景举例】比如:点击按钮发请求,当后端的接口超过一定时间,假设超过三秒,没有返回结果,我们就提示用户请求超时
代码附上
点击测试
这里就不打印了,结果和上图打印的类似总结
- Promise.all接收的是数组,得到的结果也是数组,并且一一对应,也可以理解为Promise.all照顾跑的最慢的,最慢的跑完才结束。
- Promise.race接收的也是数组,不过,得到的却是数组中跑的最快的那个,当最快的一跑完就立马结束。
推荐阅读
- 急于表达——往往欲速则不达
- 第三节|第三节 快乐和幸福(12)
- 20170612时间和注意力开销记录
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- 对称加密和非对称加密的区别
- 眼光要放高远
- 樱花雨
- 前任
- 2020-04-07vue中Axios的封装和API接口的管理
- 烦恼和幸福