promise.all()使用

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, ...]