비동기 방식에 대해 질문올려봅니다.

Question

안녕하세요. 그랩님 그랩님 강좌를 잘 보고 있는 한 수강생입니다.

다름이아니라 강의 내용과는 별개의 내용이지만 그랩님을 통해 자바스크립트를 배우고 여러가지 배웠기 때문에 그랩님께 질문

남겨봅니다.

const getData = async () => {
    try {
        const result = await axios.get(
            "https://b2ef45f8-e166-41d7-bd35-9ad159028fbf.mock.pstmn.io/test"
        );
        const products = result.data.products;
        console.log(products);
        console.log(`status:(${result.status}) 통신을 성공했습니다!`);
        const data = JSON.stringify(products);
        return data;
    } catch (err) {
        console.error(err);
        console.log("결과를 가져오지 못했습니다.");
        return err;
    }
};

console.log(getData());

위에 코드는 프로미스 형식의 axios객체를 async, await을 이용해 then과 catch등을 축약해서 제가 만든 포스트맨 목서버의 데이터를 get메서드로 불러와서 결과값을 확인하는 코드입니다. 실행에는 문제가 전혀 없습니다. 그런데 제가 궁금한 것은 getData 함수 표현식이 async로 감싸져 promise객체를 받아 비동기 처리가 되어서 console.log(getData())가 먼저 실행된 뒤에 getData 함수가 실행된다는것은 알고있습니다. 허나 만약에 비동기 함수에서 리턴값을 받아 출력을 하고 싶을 때는 어떤 처리를 해야 하는지가 궁금합니다. 만약 코드가 실행되면 console.log(getData())가 실행될 때 Promise { <pending> }가 출력이 되었습니다.

Answer

좋은 질문 감사합니다!

async, await은 난이도 상 따로 다루진 않았는데, promise를 쉽게 사용할 수 있도록 도와주는 키워드입니다.

만약 async함수를 이렇게 붙였다면 해당 함수는 비동기함수가 됩니다(Promise 함수랑 비슷)

따라서 이를 결과값으로 받아 실행하고 싶다면 (1)await을 앞에 붙이기 (2).then()으로 접근하는 방법 2가지가 있습니다.

그런데 await을 쓰기 위해선 기본적으로 또 async함수 안에서만 사용이 가능해서 그냥 console.log를 하는 것 이 아닌, 아래와 같이 async함수를 선언해서 원하는 결과를 뽑아주시면 됩니다 :)

var test = async () => {

result = await getData();

console.log(result)

}

test()

이승훈

비동기 방식에 대해 질문올려봅니다.

이 글과 비슷한 Q&A

서버 실행하고 브라우저로 들어갔을때 404에러

안녕하세요, 섹션 7의 express mysql2 설치 및 RDS 데이터베이스 생성 관련하여 질문 드립니다.

final 과제 코드 질문입니다.

섹션 7 GraphQL 관련 질문 드립니다