promise, async, await에 관한 질문입니다.

[이승민]

안녕하세요. 최근까지 c++, 자바만 공부해보다가 프로그램 뭐라도 만들어 봐야겠다 싶어서 만들던 중 자바스크립트를 써야 하는 상황이라 선생님 강의를 들으면서 자바스크립트를 해보고 있습니다.

제가 하려고 하는 것이 어떤 사이트의 api를 통해 application/json 형태의 데이터를 받아서 제가 원하는 정보를 꺼내 새로운 객체에 저장하는 것입니다.
제가 결과를 웹페이지에서 확인하는데 객체를 출력하거나 객체 안의 객체들을 참고할려고 할 때 undifined로 인해 에러가 발생했습니다.
여러 곳에서 찾아보니 비동기/동기 처리 관련된 문제인 것 같아 강의들 중 비동기/동기 처리에 관한 강의들만 빠르게 듣고 프로그램을 다시 만져보던 중 의문점이 생겨서 질문드려요.



위의 코드가 사이트의 api로 json을 얻어와 원하는 객체로 만드는 함수입니다. 이 코드를 


위처럼 html 파일에서 호출해 전체 정보를 저장할 객체에 저장하려고 합니다. 이와 같이 실행했을 때는 제가 원하는 것처럼 보이게


이렇게 실행됩니다. 문제는 저러한 정보를 얻는 함수가 여러 개여서 Promise의 성공의 결과로 
객체를 받아 전체 정보를 저장하는 객체에 추가하려고 하니 코드를 짜기 어려워보여


위처럼 Promise 안에서 전체 객체를 생성해 모든 함수를 호출하여 전체 객체를 성공의 결과로 넘기려고 했습니다. 근데 위를 실행해보니


이처럼 Promise 객체? 자체가 넘어오는 것처럼 보였습니다.

처리되는 순서도 html <script>의 마지막에 console.log(~~~)를 넣어보니 제가 원하는대로 작동한 코드는 ~~~가 출력된 후에,
 밑의 코드는 Promise의 결과가 출력된 후 ~~~가 출력되었습니다. 

제가 자바스크립트를 이번에 처음 만져보고 프로그램도 처음 만들어보는 거다보니 뭐가 문제인지 감이 안 잡혀서 질문드립니다...
어디부터 모르는 건지 몰라서 질문이 길어지고 설명이 이상해져서 죄송합니다 ㅠㅠ

[이승민]

그리고 방금 해본 건데 정보를 추출하는 다른 함수는 Promise 강의에서 예시로 들어주신 .then() 안에 새로운 Promise를 만들어 return하여 
.then()으로 이어 처리하는 식으로 하였는데, 해당 함수에는 맨 위에 함수처럼 따로 async와 await를 추가 안 해도 전체 객체에 잘 추가가 되더라구요....
가면 갈수록 더 헷갈려지네요...ㅠ

+) 추가 안 해도 잘 되는 줄 알았는데 그 객체 안의 것들을 참고하려니 맨 위의 함수 말고는 다 undifined가 나오네요 ㅠ

[codingapple]

axios.get은 자동으로 그 자리에 promise가 남아서 또 promise로 싸맬 필요는 없습니다
뒤에 .then붙이면 끝입니다

[이승민]

axios.get이 자동으로 promise가 남는다는 걸 async 가 promise를 남기는 것과 비슷하게 동작한다고 이해하고

이것처럼 axios가 남긴 promise 오브젝트를 리턴하게 하고



리턴 받은 promise 오브젝트의 결과를 저장하게 고쳤습니다. 제가 잘못 이해한 게 있을까요...?
그리고 async의 경우 실패했을 때 Promise.reject()를 반환해서 실패를 탐지하게 할 수 있다고 하셨는데 axios의 경우도 똑같이 처리할 수 있는지 궁금합니다 

[codingapple]

함수에서 axios.get()만 return한 다음에
함수().then 하거나 await 함수() 해서 쓰면 됩니다
await 쓰려면 에러처리는 try catch 써야합니다

[이승민]

axios.get()을 하는 함수를 따로 만들어서 해봐야겠네요! 답변 감사합니다 ㅎ

[글쓴이]

글