인프런 커뮤니티 질문&답변
작성한 질문수
강의 예제 관련해서 질문이 있습니다.
작성
·
10
·
수정됨
1
2.14) 비동기 작업 처리하기 3. Async&Awat 강의 예제 질문
async function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
id: "Lu75",
username: "Lu",
});
}, 1500);
});
}
async function printData() {
const data = await getData();
console.log(data, "...?");
return data; // 아마도 저 await 동작을 기다리기 전에 반환 처리가 먼저 되는 것일까?
}
console.log(printData()); // Promise 객체가 콘솔에 찍힙니다.질문 요약: printData()를 호출한 값을 console.log()로 출력할 때, 왜 Prmise 객체가 찍히는 걸까요?
예제 코드에서 printData() 함수에서 data 라는 변수에 getData() 함수의 실행 결과? Promise 객체에서 resolve 값이 담기는 거로 이해하고 있어서 data 변수를 return을 해서 console.log()로 출력을 해봤는데 제가 예상한 값이 나오지 않았습니다.
강의에서 나온 내용으로 제가 이해하기로는 await 키워드는 비동기의 작업을 기다려준다고 하여 data 변수에 당연히 getData()에서 Promise 객체가 resolve한 결과 값이 담기고 그 후에 return을 하는 줄 알았거든요!
printData()를 호출한 값이 data의 값이 아닌 Promise 객체가 출력되어 이해가 되지 않아 질문을 합니다.
getData() 함수에서 Promise의 executor 함수 부분에서 setTimeout()을 사용하여 1500ms를 기다리기 전에 printData()가 실행이 종료되어 그런걸까요..? 실행 순서가 잘 이해가 되지 않아 질문 남깁니다...!
답변 2
2
printData() 함수도 비동기 async 선언한 함수인데 당연히 반환되는 결과는 Promise 인게 맞습니다.
printData() 함수로 반환되는 data를 콘솔에 출력해 보려면.
다시 비동기로 선언한 함수 안에서 await printData() 로 data를 반환 받아서 콘솔로 출력해 보시거나
printData.then(data => console.log(data)) 로 콘솔을 출력해 보셔야 합니다.
앞으로는 async 가 붙은 함수의 결과는 Promise 객체로 감싼 값으로 받는다고 생각하고 코드를 작성해야 할 겁니다.
1
안녕하세요, 인프런 AI 인턴입니다. Lucy님.
비동기 작업과 관련된 여러분의 코드에서 printData() 함수를 호출한 결과가 Promise 객체로 출력되는 이유에 대해 설명 드리겠습니다.
async 함수는 항상 Promise를 반환합니다. 이 함수가 종료될 때, 해당 함수가 종료될 때 반환되는 값은 Promise가 됩니다. 비록 await를 사용해서 비동기 작업의 결과를 기다리고, 그 결과를 data 변수에 저장했지만, printData()의 반환 자체는 Promise여서, console.log(printData())는 즉시 실행되면서 아직 해결되지 않은 Promise를 출력하게 됩니다.
코드 순서는 다음과 같습니다:
printData()함수 호출: 이 함수는async함수로 Promise 객체를 반환합니다.
await getData(): 이 부분에서getData()의 완료를 기다리고, 완료되면 해당 결과를data에 저장합니다.
console.log(data, "...?"):data출력 -> 이 부분은 비동기 완료 후 실행됩니다.
return data;: 이 반환은printData()함수가 호출될 때 사용자에게 반환되는 값이 아닌, 이 함수가 비동기로 해결되었을 때 Promise의 해결 값이 됩니다.
console.log(printData()): 이 호출은printData()함수가 종료되지 않았을 때 발생해서, Promise 객체를 출력합니다.
이해에 도움이 되는 관련 질문 URL도 참고하시면 좋겠습니다:
- async/await 질문 있습니다. - 비슷한 코드 예제가 있으며,
async/await의 동작 방식에 대한 설명이 있습니다.
아래의 두 가지 방법 중 하나로 코드를 수정하여 예상한 값을 출력하도록 할 수 있습니다:
printData()에서console.log를 사용하여 직접 값을 출력
printData()의 결과를 이용해 추가적인then()을 체이닝하여 해결 후 값을 사용
printData().then(result => console.log(result));
이 방식들은 async와 비동기의 특성을 이해하는 데 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
감사합니다! async 키워드가 붙은 함수의 반환 값은 Promise 객체로 감싼 값이라고 생각해야 하는군요. 이해됐습니다.