- Promise.all可以将多个Promise实例包装成一个新的Promise实例。
- Promise.all获得的成功结果的数组里面的数据顺序和发送请求的顺序是一致的,而不会根据响应结果的顺序排序。
- Promise.all失败的时候则返回最先被reject失败状态的值,与成功的返回顺序是不同的。
Promse.all在处理多个异步请求时非常有用,例如表单中上传相册,需要所有图片上传完毕得到地址才能提交表单,可以通过Promse.all控制一个loading变量的状态来校验提交条件。
上传相册的例子:
//假设这是已选择的文件列表
let files = ['aaaa.jpg','bbbb.jpg','cccc.jpg']
//上传发出的请求列表
let fileRequests = [];
//请求中状态
let requesting = true;
//循环文件列表上传
files.forEach(file => {
//定义FormData格式的参数
let formData = new FormData();
formData.append('folder', 'album'); //假设上传到服务器上指定的album文件夹下
formData.append('file', file);
//axios接收到FormData格式的参数,自动使用Content-Type: multipart/form-data方式上传
let fileRequest = axios.post('http://www.lihefei.com/upload/file', formData)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//把上传请求加入列表
fileRequests.push(fileRequest);
});
//所有请求完成结果
Promise.all(fileRequests).then((response) => {
console.log(response); //所有请求成功结果:['aaaa.jpg上传成功','bbbb.jpg上传成功','cccc.jpg上传成功']
}).catch((error) => {
console.log(error); //所有请求失败结果
}).then((result) => {
requesting = false; //所有请求结束,更新请求中状态
})
//提交表单
function submit() {
if (requesting) {
console.log('图片正在上传,请稍后提交');
return;
}
}