Promise.race
赛跑机制,只认第一名
Promise.race其实使用的并不多,如果真要使用。我们可以提出这样一个需求:
比如:点击按钮发请求,当后端的接口超过一定时间,假设超过三秒,没有返回结果,我们就提示用户请求超时
js
<template>
<div class="box">
<el-button type="primary" plain @click="clickFn">点击测试</el-button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
async clickFn() {
// 第一个异步任务
function asyncOne() {
let async1 = new Promise(async (resolve, reject) => {
setTimeout(() => {
// 这里我们用定时器模拟后端发请求的返回的结果,毕竟都是异步的
let apiData1 = "某个请求";
resolve(apiData1);
}, 4000);
});
return async1;
}
console.log("异步任务一", asyncOne()); // 返回的是pending状态的Promise对象
// 第二个异步任务
function asyncTwo() {
let async2 = new Promise(async (resolve, reject) => {
setTimeout(() => {
let apiData2 = "超时提示";
resolve(apiData2);
}, 3000);
});
return async2;
}
console.log("异步任务二", asyncTwo()); // 返回的是pending状态的Promise对象
// Promise.race接收的参数也是数组,和Promise.all类似。只不过race方法得到的结果只有一个
// 就是谁跑的快,结果就使用谁的值
let paramsArr = [asyncOne(), asyncTwo()]
Promise
.race(paramsArr)
.then((value) => {
console.log("Promise.race方法的结果", value);
if (value == "超时提示") {
this.$message({
type:"warning",
message:"接口请求超时了"
})
}else{
console.log('正常操作即可');
}
})
},
},
};
</script>
Promise.all接收的是数组,得到的结果也是数组,并且一一对应,也可以理解为Promise.all照顾跑的最慢的,最慢的跑完才结束。
Promise.race接收的也是数组,不过,得到的却是数组中跑的最快的那个,当最快的一跑完就立马结束。