循环中的顺序 axios 请求

Question

I need to make 4 consecutive axios requests to the server in order to successfully upload a file. One file loads correctly. Problems arise with many files. How can I best load each file sequentially in a loop?

function uploadFile (item, index) {
        DataService.getUploadform(...).then(response => {
                ...
                DataService.postUploadForm(...).then(response => {
                ...
                   DataService.getUploadFinish(...).then(responseUploadFinish => {
                         ...
                           DataService.getDowloadLink(...).then(responseDowloadLink => {
                                 //End
                            }).catch(error => {
                            //do something  
                            })
                                   
                   }).catch(error => { 
                   //do something
                  })
                    
               }).catch(error => {
                 //do something
               })
               
       }).catch(error => {
           //do something
        })
}
 
// hook that initializes file uploads   
useUpdateEffect(() => {
    validFiles.forEach((file, index) => {
       uploadFile(file,index)
    })
}, [uploadSession]);

Answer 1

If it has to be sequential and your server cant handle multiple uploads at the same time then you need to await your promise DataService.getUploadform() .

Note: this will take significantly longer.

// add async signature
async function uploadFile (item, index) {
        return await DataService.getUploadform(...).then(response => {
                ...
                DataService.postUploadForm(...).then(response => {
                ...
                   DataService.getUploadFinish(...).then(responseUploadFinish => {
                         ...
                           DataService.getDowloadLink(...).then(responseDowloadLink => {
                                 //End
                            }).catch(error => {
                            //do something  
                            })
                                   
                   }).catch(error => { 
                   //do something
                  })
                    
               }).catch(error => {
                 //do something
               })
               
       }).catch(error => {
           //do something
        })
}

useUpdateEffect(() => {
  (async () => {
    for(let i = 0; i < validFiles.length; i++) await uploadFile(file,i)
  })()
}, [uploadSession]);