Promise.all在文件上传中的应用

  • 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;
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值