Promise.all()该方法用于将多个Promise实例,包装成一个新的Promise实例,接受一个由promise任务组成的数组,可以同时处理多个promise任务,当所有的任务都执行完成时,Promise.all()返回resolve,如果有一个失败(reject),则返回失败的信息,即使其他promise执行成功,也会返回失败。Promise.all()方法可以用于并发请求,从而优化性能,看下面示例

const p1 = new Promise((resolve,reject)=>{
});
const p2 = new Promise((resolve,reject)=>{
});
const p3 = new Promise((resove,reject)=>{
});
const p = Promise.all([p1,p2,p3]);

1. 当p1,p2,p3的状态都变为fulfilled时,p的状态才会变成fulfilled,此时p1,p2,p3返回值组车一个数组,传递给p的回调函数

2. 当p1,p2,p3中有一个状态变为rejected时,p的状态就变成rejected,第一个状态变为rejected的返回值就会传递给p的回调函数

示例如下

const p1 = new Promise((resolve,reject)=>{
    resolve('请求成功')
});
const p2 = new Promise((resolve,reject)=>{
    resolve('上传成功')
});
const p3 = Promise.reject('error')

Promise.all([p1,p2]).then(data=>{
    console.log(data)  // data为一个数组  ['请求成功','上传成功']
}).catch(err=>{
    console.log(err)
})

Promise.all([p1,p2,p3]).then(data=>{
    console.log(data)
}).catch(err=>{
    console.log(err) // 失败 打印结果为 'error'
})

Promise.all()方法常用于并发请求,比如页面多个不相关的请求接口,使用并发请求可以有效减少页面响应时间,比如批量上传图片,如果有一个图片失败则终止上传等等;并发请求如下示例rug

function test1(){
   return axios({
      methods:"get",
      url:"api/v/getlist"
   })
}
function test2(){
   return axios({
      methods:"get",
      url:"api/v/getlist2"
   })
}
axios.all([test1(),test2()]).then(data=>{
  console.log(data)  // data为请求结果组成的数组
).catch(err=>{
    console.log(err)
})

但是上述写法存在问题,如果有一个请求发生错误则会阻塞返回值,这个时候返回的是发生错误的(及rejected)请求的结果,这不是我们想要的,可以这么解决

function test1(){
   return axios({
      methods:"get",
      url:"api/v/getlist"
   }).catch(err=>{
      return Promise.resolve("test1无数据")  // 在catch里面resolve就行了
   }) 
}
function test2(){
   return axios({
      methods:"get",
      url:"api/v/getlist2"
   }).catch(err=>{
      return Promise.resolve("test2无数据") 
   })
}
axios.all([test1(),test2()]).then(data=>{
  console.log(data)  // data为请求结果组成的数组
).catch(err=>{
    throw new Error("错误", err)
})

另外ES6还有一种方法 Promise.allSettled(),Promise.allSettled() 方法返回一个在所有给定的 promise 都已经  或 rejected 后的 promise,并带有一个对象数组,每个对象表示对应的 promise 结果。所以上面更好的解决方式直接用 Promise.allSettled()

另外要注意的是 Promise.all()执行顺序和返回顺序,最终返回结果是按照Promise.all()的入参顺序返回的,及 Promise.all([funA,funB,funC, ...]) => [resultA,resultB,resultC, ...]

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐