Promise.race的使用

顾名思义,Promse.race就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})

原理是挺简单的,但是在实际运用中还没有想到什么的使用场景会使用到。

### Promise.all 和 Promise.race 的区别与使用场景 #### 1. **Promise.all 的用法** `Promise.all` 方法用于将多个 Promise 实例包装成一个新的 Promise 实例。它会在所有传入的 Promise 都成功完成后才返回一个包含所有结果的数组[^3]。如果其中任何一个 Promise 被拒绝(rejected),则 `Promise.all` 会立即返回被拒绝的值,并忽略其他 Promise 的执行结果。 ```javascript let p1 = Promise.resolve('成功了'); let p2 = Promise.resolve('success'); Promise.all([p1, p2]).then((result) => { console.log(result); // 输出: ['成功了', 'success'] }).catch((error) => { console.log(error); }); ``` 如果其中一个 Promise 被拒绝,则 `Promise.all` 会直接进入 `catch` 分支,并输出第一个被拒绝的错误信息[^3]。 ```javascript let p1 = Promise.resolve('成功了'); let p2 = Promise.reject('失败'); Promise.all([p1, p2]).then((result) => { console.log(result); }).catch((error) => { console.log(error); // 输出: '失败' }); ``` #### 2. **Promise.race 的用法** `Promise.race` 方法同样接受一个 Promise 实例的数组作为参数,但它会返回第一个完成的 Promise 的结果,无论这个结果是成功还是失败[^2]。一旦有一个 Promise 完成,其余的 Promise 将被忽略。 ```javascript let p1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'A')); let p2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'B')); Promise.race([p1, p2]).then((result) => { console.log(result); // 输出: 'B',因为 p2 更快完成 }).catch((error) => { console.log(error); }); ``` 如果第一个完成的 Promise 是被拒绝的,则 `Promise.race` 会直接进入 `catch` 分支[^2]。 ```javascript let p1 = Promise.reject('Error'); let p2 = Promise.resolve('Success'); Promise.race([p1, p2]).then((result) => { console.log(result); }).catch((error) => { console.log(error); // 输出: 'Error',因为 p1 更快完成 }); ``` #### 3. **Promise.all 和 Promise.race 的区别** - **执行方式**: - `Promise.all` 等待所有 Promise 都完成,才会进入 `then` 分支[^3]。 - `Promise.race` 只需要一个 Promise 完成就会触发回调,无需等待其他 Promise[^2]。 - **返回结果**: - `Promise.all` 返回一个包含所有 Promise 结果的数组[^3]。 - `Promise.race` 返回第一个完成的 Promise 的结果,无论是成功还是失败[^2]。 - **错误处理**: - 在 `Promise.all` 中,只要有一个 Promise 被拒绝,整个操作就会失败并进入 `catch` 分支。 - 在 `Promise.race` 中,第一个完成的 Promise 决定了最终的结果,无论它是成功还是失败[^2]。 #### 4. **使用场景** - **Promise.all 的使用场景**: - 当需要同时发起多个异步请求,并且只有在所有请求都成功完成后才能继续下一步操作时,可以使用 `Promise.all`[^3]。 - 例如:从多个 API 获取数据后进行汇总分析。 - **Promise.race使用场景**: - 当需要从多个来源获取相同的数据,并选择最快返回的那个时,可以使用 `Promise.race`[^2]。 - 例如:向多个镜像服务器发送请求,哪个服务器先响应就使用哪个结果。 ### 示例代码 ```javascript // 使用 Promise.all let api1 = fetch('https://api.example.com/data1'); let api2 = fetch('https://api.example.com/data2'); Promise.all([api1, api2]).then((responses) => { return Promise.all(responses.map(response => response.json())); }).then((data) => { console.log(data); // 处理两个 API 的数据 }).catch((error) => { console.error(error); }); // 使用 Promise.race let fastApi1 = fetch('https://fast-api1.example.com/data'); let fastApi2 = fetch('https://fast-api2.example.com/data'); Promise.race([fastApi1, fastApi2]).then((response) => { return response.json(); }).then((data) => { console.log(data); // 使用最快返回的 API 数据 }).catch((error) => { console.error(error); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值