AsyncAwait不等待获取响应

Question

I am having a problem in executing API calls using aysnc and await. I am using fetch method to call a Spring Boot service which returns a JSON string after uploading a file. Before getting the status of upload file data next code is executing. Help me to resolve the issue. Below is the code I have written -

endProgressSimulation(uploadingFiles) {
        this.setState(({ acceptedFiles }) => {
            const updatedFiles = acceptedFiles.map(file => {
                if (uploadingFiles.map(loadingFile => loadingFile.name).includes(file.name)) {
                    const formData = new FormData();
                    formData.append('file', file);

                    const requestAwait = async() => {
                        console.log("Sending fetch");
                        const response = await fetch('http://localhost:5002/Upload/',{
                            method: 'post',
                            body:formData
                             })
                             console.log("Got response...");
                        const json = await response.json();
                        console.log("async/await based");
                        console.log(json);
                    }
                    requestAwait();

                    file.uploaded = true;
                    return file;

                } else {
                    file.uploaded = false;
                    return file;
                }
            });
            return { acceptedFiles: updatedFiles };
        });
}

Please help to achieve functionality to wait until the completion of the upload process. Thanks in advance.

Answer 1

requestAwait is awaiting fetch , but the caller function isn't awaiting requestAwait .

Also, with several parallel API calls, I think you'll be better off with Promise.all() instead of the async-await recipe.

Answer 2

The code is not waiting, because const requestAwait is a promise. So when you cast requestAwait() the code continues to file.upload = true , without waiting for the fuction to end.

As it is right now, to make it work You must add ASYNC inside the map here :

acceptedFiles.map( async (file) => { ...function } )

Then before the cast of the requestAwait .

await requestAwait();
file.uploaded = true;
return file;