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

短命女 2023-02-17 03:52 11阅读 0赞

*  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;
    	}
    }