javascript - 理解promise.race()的用法

Question

据我所知，关于promise有两个选项:

• promise.all()

• promise.race()

好的，我知道 promise.all() 是做什么的。它并行运行 Promise，如果两者都成功解析，则 .then 会为您提供值。这是一个例子:

Promise.all([
  $.ajax({ url: 'test1.php' }),
  $.ajax({ url: 'test2.php' })
])
.then(([res1, res2]) => {
  // Both requests resolved
})
.catch(error => {
  // Something went wrong
});

但我不明白 promise.race() 到底应该做什么？换句话说，和不使用有什么区别呢？假设:

$.ajax({
    url: 'test1.php',
    async: true,
    success: function (data) {
        // This request resolved
    }
});

$.ajax({
    url: 'test2.php',
    async: true,
    success: function (data) {
        // This request resolved
    }
});

看到了吗？我没有使用过promise.race()，它的行为类似于promise.race()。不管怎样，有没有简单明了的例子来告诉我什么时候应该使用promise.race()？

Answer 1

如您所见，race() 将返回首先解决或拒绝的 Promise 实例:

var p1 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, 'one'); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, 'two'); 
});

Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "two"
  // Both resolve, but p2 is faster
});

对于一个要使用的场景，也许你想限制一次请求的花费时间:

var p = Promise.race([
    fetch('/resource-that-may-take-a-while'),
    new Promise(function (resolve, reject) {
         setTimeout(() => reject(new Error('request timeout')), 5000)
    })
])
p.then(response => console.log(response))
p.catch(error => console.log(error))

使用race()，您只需要获取返回的promise，您不必首先关心race([])中的哪一个promise返回，

但是，如果没有 race，就像您的示例一样，您需要关心哪一个将首先返回，并在两个 success 回调中调用回调。