promise循環調用異步函數（以圖片上傳為例）

引言：我們在項目中經常會遇到圖片上傳的情況，一般圖片上傳我們為了考慮性能和其他因素，因此經常會設計為將圖片數組循環單個圖片上傳；因此這就使用了promise的for循環

uploadImages(){   //總的圖片上傳函數
                return new Promise((resolve, reject) => {
                    let vm = this;
                    let uploadNum = 0
                    console.log('imgParams',vm.imgParams)
                    if (vm.imageTemArr.length > 0) {
                        for(let i= 0;i<vm.imageTemArr.length;i++){
                            imageService.uploadImage(vm.imgParams, vm.imageTemArr[i]).then(res => {    //單個圖片上傳函數
                                uploadNum++
                                if(uploadNum>=vm.imageTemArr.length){
                                    // 重新獲取圖片
                                    imageService.getImgInfo(vm.imgParams).then(res=>{
                                        console.log('add 影像信息',res)
                                        let resData = res.result.record
                                        let resName = []
                                        resData.forEach((item,index)=> {
                                            resName.push(item.file_name)
                                        });
                                        let params = {
                                            "resType":vm.imgParams.resType,
                                            "tablePk":vm.imgParams.headerId,
                                            "resName":resName
                                        }
                                        console.log('this.addimgParams',this.imgParams)
                                        resolve("S");
                                    }).catch(error=>{
                                        reject("E");
                                    })
                                }

                            }).catch(error => {
                                let vm = this;
                                this.showPrompt('圖片上傳失敗，請重新點擊上傳!');
                                console.log("圖片上傳失敗,錯誤信息：" + error);
                                reject("E");
                            });
                        }
                    }
                });
            }

 

話不多說先上代碼：

在這里我們貼出了總的函數代碼下面我們將單個圖片上傳的接口貼出來

 

uploadImage(params, imgData){
        let formData = new FormData();
        console.log("params.documentNumber"+params.documentNumber);
        formData.append('documentNumber',params.documentNumber); // 單據編號
        formData.append('userId',params.userId);  // 上傳用戶
        formData.append('resType',params.resType); // 單據類型
        formData.append('file',imgData.file); // bolb二進制文件流
        formData.append('fileName',imgData.imageName); // 文件名字
        let url = process.env.ossUrl + "/pictures/upload";
        return Axios.postFormData(formData,url);
    }

 總結：我們首先在uploadImages函數中return一個promise對象；在promise對象中首先聲明一個計數器uploadNum，用於記錄當前已經上傳圖片的個數；然后對於圖片數組進行循環調用單個圖片上傳函數uploadImage；uploadImage返回的也是一個promise對象，如果成功了則計數器uploadNum++；並判斷當前圖片是不是圖片數組中的最后一張圖片，如果是最后一張圖片，則重新調用圖片獲取接口，用於刷新圖片並resolve("S").