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怎么处理异常错误,明天见。