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.all照顾跑的最慢的，最慢的跑完才结束。
• Promise.race接收的也是数组，不过，得到的却是数组中跑的最快的那个，当最快的一跑完就立马结束。