Promise와 async-await 2(23-01 실습문제)

/* Async Await 방식의 Ajax 요청(권장) */

        document.querySelector("#btn2").addEventListener("click", async e=>{

            e.preventDefault();

            console.log("로딩중...");

            // 요청(접속)할 대상 페이지 주소 -> 이 파일의 소스코드를 읽어온다.

            const url = "http://localhost:3001/hello.html";

            // 결과를 저장할 변수

            let response = null;

            try{

                response = await axios.get(url); // 반환되는 값(아마 promise겠지) 앞에 await 으로 감싼다.

                console.log(response.data);

            }catch(error){

                console.error(error);

                alert(error.message);

                // catch에서 return 하더라도 finally가 수행된 후 실행이 취소된다.

                return;

            }finally{

                console.log("gg");

            }

            // 응답 결과를 출력할 대상 객체

            const result = document.querySelector("#result");

            // 응답 결과를 출력

            result.insertAdjacentHTML("beforeend", response.data);

        });

 

 

Promise 반환 부분을 await로 감싼다고 했는데, 내가 보내준 코드에서는, response가 그 대상이니까, response에 값을 넣는 수식인 axios.get(url) 앞에 await을 붙인거야?

 

 

Show drafts

 

네, 정확하게 이해하셨습니다. 제공된 코드에서 response 변수에 값을 할당하는 부분이 바로 axios.get(url)입니다. axios.get(url)은 Promise를 반환하므로, 이 부분 앞에 await 키워드를 붙여 Promise가 해결될 때까지 기다리고, 해결된 결과(응답 데이터)를 response 변수에 할당하는 것입니다.

즉, response = await axios.get(url); 코드는 다음과 같은 의미를 가집니다.

1. axios.get(url)을 실행하여 HTTP GET 요청을 보냅니다.
2. axios.get(url)은 Promise를 반환합니다.
3. await 키워드는 Promise가 해결될 때까지 기다립니다.
4. Promise가 해결되면 응답 데이터를 response 변수에 할당합니다.
5. 이후 코드는 response 변수에 할당된 응답 데이터를 사용하여 처리를 계속합니다.

따라서, 제공된 코드에서 response에 값을 할당하는 axios.get(url) 앞에 await을 붙이는 것은 Promise 반환 부분을 await로 감싸는 것과 동일한 의미를 가집니다.

이렇게 async/await 구문을 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 코드의 가독성을 높이고 에러 처리를 간편하게 할 수 있습니다.