Promise.all和Promise.race的使用

本文详细介绍了Promise.all和Promise.race在JavaScript中的使用。Promise.all用于等待所有Promise实例完成,返回值为一个数组,顺序与输入数组一致。而Promise.race则返回最快完成或失败的Promise结果。在实际开发中,Promise.all常用于处理多个异步请求,如等待多个Ajax数据返回。而Promise.race适合于需要快速响应的场景。文章还通过示例展示了这两个方法的具体应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、Promise.all的使用

Promise.all可以将多个promise实例包装成一个新的promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个数组,失败的时候返回最先reject失败状态的值。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了,打出 '失败'
})

promise.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据返回结果以后才正常显示,在此之前只显示loading图标。

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})

需要特别注意的是:
1、promise.all获得的成功结果的数组里面的数据顺序和promise.all接收到的数组顺序是一致的,即p1的结果在前,即便p1的结果获取的比p2要晚。这带来了一个绝大的好处:在前端开发请求数据的过程中,偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景,使用promise.all毫无疑问可以解决这个问题。
2、promise数组中任何一个promise为reject的话,则整个Promise.all调用会立即终止,并返回一个reject的新的promise对象

二、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、付费专栏及课程。

余额充值