• Promise.all接收的是数组，得到的结果也是数组，并且一一对应，也可以理解为Promise.all照顾跑的最慢的，最慢的跑完才结束。
• Promise.race接收的也是数组，不过，得到的却是数组中跑的最快的那个，当最快的一跑完就立马结束。

Promise.all( ).then( )适用于处理多个异步任务，且所有的异步任务都得到结果时的情况。

比如:用户点击按钮,打开对话框,对话框中有两部分数据,分别从两个接口返回,当对话框初始化是显示'数据加载中'的状态,当两个接口数据全部成功返回时,'数据加载中'状态消失

此时就可以用Promise.all()来处理

<template><div><el-button @click="handleClick"> Promise.all </el-button></div>
</template><script>
export default {name: 'promiseAll',methods: {handleClick() {this.isShowDialog = true //打卡dialogthis.loading = true // 开启loading数据加载中function asyncFn1() {return new Promise(resolve => {setTimeout(() => {let data1 = '第一个接口返回数据啦'resolve(data1)}, 800)})}function asyncFn2() {return new Promise(resolve => {setTimeout(() => {let data2 = '第二个接口返回数据啦'resolve(data2)}, 500)})}Promise.all([asyncFn1(), asyncFn2()]).then(res => {//res就是两个接口返回的数据console.log(res)//['第一个接口返回数据啦', '第二个接口返回数据啦']this.loading = false //关闭loading数据加载中})}}
}
</script>

Promise.race()赛跑机制,只认第一名。

 比如:点击按钮发送请求,当后端的接口超过一段时间,假设超过3秒,没有返回结果,提示超时

 

<template><div><el-button @click="handleClick">Promise.race</el-button></div>
</template><script>
export default {name: 'promiseRace',methods: {handleClick() {function asyncFn1() {return new Promise(resolve => {setTimeout(() => {let data1 = '某个请求'resolve(data1)}, 4000)})}function asyncFn2() {return new Promise(resolve => {setTimeout(() => {let data2 = '超时提醒'resolve(data2)}, 3000)})}Promise.race([asyncFn1(), asyncFn2()]).then(res => {console.log(res) //拿到的是最快的一个if (res === '超时提醒') {this.$message.warning('接口请求超时了')} else {console.log('正常操作后续')}})}}
}
</script>