Mutiple await에 대한 이해

async/await를 이해하고 1개의 async 아래 2개 await 선언을 이해한다.

 

아래 예제는 uber eats 프로젝트에서 add-restaurant Component의 submit 함수다.

 

동작 플로우 정리

1. 이미지 처리 시에 비동기처리로 s3에 업로드되어있는 이미지를 불러오는 엔드포인트로 요청을 보낸다.
2. 응답하는 함수의 return 값은 이미지 url을 return하게 된다.
3. return된 이미지 url에 json()함수를 비동기적으로 받기위해 await를 선언해준다.
4. 결과적으로 coverImg 변수에는 json형식의 key는 "url", value는 "http://....com"이 된다.

const onSubmit = async() => {
        try {
            setUploading(true);
            const { file, name, address, categoryName } = getValues();
            const actualFile = file[0];
            const formBody = new FormData();
            formBody.append("file", actualFile);
            const { url:coverImg }= await (
//  async 하나에 await 여러개 선언하는건 상관이 없다. 
//  Promise 객체, async/await의 개념을 완벽히 이해하면 오해할 일이 없다.
//  작동방식
//  먼저 fetch가 동작해서 데이터를 보낸다.
//  비동기적 함수(AJAX, setTimeout)면 WebAPI를 통해 대기 후 
//	해당 함수를 CallBack Queue로 이동한다. 
//	fetch도 서버와 비동기적 통신하는 함수이므로 Web API로 들어간다.
//  밖에 await json()을 실행하게 된다.
//  json()은 response 스트림을 가져와 스트림이 완료될때까지 읽고 
//	텍스트를 JSON으로 바꾸는 결과로 해결되는 promise 객체를 반환한다.
//  await를 선언해줌으로서 json 값을 가져올 수 있게 된다.
                await fetch("http://localhost:4000/uploads/", {
                    method:"POST",
                    body: formBody,
                })
            ).json();
            createRestaurantMutation({
                variables: {
                    input: {
                        name,
                        address,
                        categoryName,
                        coverImg,
                    }
                }
            })
        } catch(e) {
            
        }