Promise.all和Promise.race的区别和使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了Promise.all和Promise.race的区别和使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Promise.all

比如当数组里的P1，P2都执行完成时，页面才显示。
值得注意的是，返回的数组结果顺序不会改变，即使P2的返回要比P1的返回快，顺序依然是P1，P2
Promise.all成功返回成功数组,
失败返回失败数据,一但失败就不会继续往下走

let p1 = Promise.resolve('aaa');
let p2 = Promise.resolve('bbb')
// let p3 = Promise.reject('ccc')
let p4 = Promise.resolve('ddd')
Promise.all([p1, p2, p4]).then(res => {
    console.log(res); // ['aaa', 'bbb', 'ddd']
}).catch(err => {
    console.log(err, "错误");
})

如果遇到错误的情况，那么将不会继续执行下去，直接返回catch方法

let p1 = Promise.resolve('aaa');
let p2 = Promise.resolve('bbb')
let p3 = Promise.reject('ccc')
let p4 = Promise.resolve('ddd')
Promise.all([p1, p2,p3, p4]).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err); //ccc
})

Promise.race

Promise.race是赛跑的意思，也就是说Promise.race([p1, p2, p3])里面的结果哪个获取的快，就返回哪个结果，不管结果本身是成功还是失败

let p1 = Promise.resolve('aaa');
let p2 = Promise.resolve('bbb')
let p3 = Promise.reject('ccc')
let p4 = Promise.resolve('ddd')
Promise.race([p1, p2, p3, p4]).then(res => {
    console.log(res, "成功"); //aaa 成功
}).catch(err => {
    console.log(err, "失败"); 
})

如果第一个请求失败就直接

let p1 = Promise.resolve('aaa');
let p2 = Promise.resolve('bbb')
let p3 = Promise.reject('ccc')
let p4 = Promise.resolve('ddd')
Promise.race([p3, p2, p1, p4]).then(res => {
    console.log(res, "成功"); 
}).catch(err => {
    console.log(err, "失败"); //ccc 失败
})

它们两者的使用场景

Promise.all和Promise.race都是有使用场景的。
有些时候我们做一个操作可能得同时需要不同的接口返回的数据，这时我们就可以使用Promise.all；
有时我们比如说有好几个服务器的好几个接口都提供同样的服务，我们不知道哪个接口更快，就可以使用Promise.race，哪个接口的数据先回来我们就用哪个接口的数据。文章来源地址https://www.toymoban.com/news/detail-417031.html

到了这里，关于Promise.all和Promise.race的区别和使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！