Promise.all和promise.race场景示例

问题描述为了解决前端异步函数多层嵌套导致的回调地狱问题，以及回调地狱错误不方便捕获的问题。因此，那些制定规则的大佬们给ES6增加了一个新的功能~Promise。本文主要记录Promise.all和promise.race的应用场景并给出示例。关于Promise的基本概念，这里不再赘述。Promise.all方法很简短：Promise.all().then()适用于处理多个异步任务，所有异步任务都有结果。例如，当用户点击一个按钮时，会弹出一个弹出式对话框。对话框中呈现的数据分为两部分，两部分数据是通过不同的后端接口获取的数据。在弹框弹出后的初始情况下，让弹框处于数据加载状态。当从接口中获取到两部分数据后，数据加载的状态就会消失。让用户看到这两部分的数据。所以这个时候，我们需要在这两个异步接口请求任务完成的时候去处理，所以这个时候，使用Promise.all方法，就可以轻松实现。让我们看看代码编写代码。附上打印结果图Promise.race方法Promise.racerace机制，只有第一个地方Promise.race其实用的不多，如果真的要用的话。我们可以提出这样的需求：比如：点击按钮发送请求，当后台界面超过一定时间，假设超过三秒，没有返回结果，我们会提示用户使用请求超时代码这里就不打印了，结果和上图打印的差不多总结Promise.all接收一个数组，得到的结果也是一个数组，一一对应。也可以这样理解，Promise.all照顾最慢的，最慢的就跑完了。Promise.race也接收一个数组，但是它拿到的是数组中最快的那个，最快的一个跑完了就马上结束。补充~使用async、await和promise做异步任务的顺序控制要求：完成一个方法任务的完成，然后操作下一个方法任务，如下图：渲染代码可以用await排队，当然，该功能必须包含一层promise，代码如下：烂笔胜过好记性。写下来