Promise十分好用,当出现一个异步的请求或者方法,可以使用Promise 通过then或者catch执行接下来的代码。当然也可以用过async await的方式,,将异步转为同步的方式处理。
可当你遇到一个这样的需求:必须要等多个异步方法或者操作执行完成之后,执行下一步操作,该怎么办?
比如多张图片的上传,如果用一个promise链(在一个promise.then里面再调用一个promise)这样非常麻烦,而且不科学。
Promise.all的使用场景就诞生了
展示一个promise.all()上传多张图片的代码段
Promise.all()第一个参数其实是一个由promise组成的数组
Promise.all(
//this.resources是图片对应的数组
this.resources.map((item) => {
//每一张图片对应生成一个请求上传的promise
return new Promise((resolve, reject) => {
if (item.url) {
return resolve;
}
const formData = new FormData();
item.status = 'uploading';
//PostFile是上传图片的方法,被一个promise包裹
PostFile(formData)
.then(({ data }) => {
(item.status = 'done'), (item.url = data.url);
resolve();
})
.catch(() => {
item.status = 'failed';
reject();
});
});
}),
)
//只有当每一张图片的请求对应的promise都执行完成并且resolve后,才会执行then里面的代码
.then(() => {
console.log(this.resources);
const postParams = value;
postParams.resources = this.resources.map((item) => {
return item.url;
});
postParams.type = this.type;
PostMdeiaResource(postParams).then(() => {
this.saveFetching = false;
Dialog.alert({
message: '媒体资源上传成功',
}).then(() => {
this.$router.back();
});
});
})
//只有当每一个promise都执行完,或者执行出错,或者有reject()协会安时。才会执行里面的代码
.catch((error) => {
console.log(error);
this.saveFetching = false;
});