promise.all()使用
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, ...]
更多推荐
所有评论(0)