[JavaScript知识库]JavaScript Promise.race()学习笔记（四）

今天我们来学习Promise.race()方法，race翻译过来是赛跑的意思，与Promise.all()的不同，all是等待所有promise完成后，而race是等最快的promise完成后就会返回。

介绍

Promise.race()方法接收一个数组形式的promise，并且返回一个promise对象，一旦数组中有一个promise被resolve或者reject就会立刻返回。

语法和Promise.all()差不多

Promise.race([promise1, promise2, promise3])
  .then(console.log)
  .catch(console.log)

Promise.race() 和 Promise.all()区别

Promise.all()会等待所有promise完成后返回，Promise.race()会返回最快完成的promise，不管是resolve还是reject。

Promise.race() 示例代码

p1在1秒后完成，p2在2秒后完成

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第一个promise被resolve');
    resolve(10);
  }, 1 * 1000);

});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第二个promise被resolve');
    resolve(20);
  }, 2 * 1000);
});


Promise.race([p1, p2])
  .then(value => console.log(`成功: ${value}`))
  .catch(error => console.log(`失败: ${error}`));

// 输出：
// 第一个promise被resolve
// 成功: 10
// 第二个promise被resolve

因为p1比p2快一秒，所以race会触发then，并且只返回p1的结果，p2并不会返回。

下面的例子，把p2改为reject拒绝试试，大家猜猜结果

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第一个promise被resolve');
    resolve(10);
  }, 1 * 1000);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第一个promise被reject');
    reject(20);
  }, 2 * 1000);
});


Promise.race([p1, p2])
  .then(value => console.log(`成功: ${value}`))
  .catch(error => console.log(`失败: ${error}`));

// 输出：
// 第一个promise被resolve
// 成功: 10
// 第二个promise被resolve

可以看到结果和上面一样，因为还是p1比p2快一秒，所以还是会返回p1。

下面再把p1改成reject，p2改成resolve试试

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第一个promise被reject');
    reject(10);
  }, 1 * 1000);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('第二个promise被resolve');
    resolve(20);
  }, 2 * 1000);
});


Promise.race([p1, p2])
  .then(value => console.log(`成功: ${value}`))
  .catch(error => console.log(`失败: ${error}`));

// 输出：
// 第一个promise被reject
// 失败: 10
// 第二个promise被resolve

这回结果还是p1，由于p1是reject，所以race走的catch方法。

到这里相信大家都看明白了，Promise.race就像是赛跑的一样，Promise.race([p1, p2, p3,pn])里面哪个结果跑的快，就返回哪个结果，不管结果本身是成功状态还是失败状态。

Promise.race可能在项目中使用不如Promse.all那样常用，大家知道Promise还有这个方法。

好，今天的Promise.race学习笔记到这，明天讲讲Promise怎么处理异常错误，明天见。

如果文章有帮助，微信搜索【小帅的编程笔记】，跟着我每天进步一点点