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;
	}
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章