async/await 사용 시 Promise {<pending>}

오픈 api로부터 정보를 받아오고 있었다.

console.log(json) -> 여기에서는 api로부터 받아온 정보들이 로그에 찍혀야 하는데, 아래와 같은 pending promise 가 찍혔다.

처음 보는 에러인가? 하면서 mdn 공식문서를 확인했다.

 

Promise의 3가지 상태

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise  mdn : 아래의 사진 출처

Promise

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.

 

Proise는 다음 중 하나의 상태를 가진다.

대기(pending) : 이행하지도, 거부하지도 않은 초기 상태

이행(fulfilled) : 연산이 성공적으로 완료됨

거부(rejected) : 연산이 실패함

 

현재 내 로직에서 return 된 Promise는 어떤 것도 실행하지 않은 초기 상태의 Promise인 것이다.

 

코드를 다시 살펴보니 await을 쓰지 않았었다.

await으로 비동기 함수 fetch 가 네트워크 요청 생성 && promise를 return 하게끔 해줬어야 했는데, 안써서 비동기 동작 자체를 하지 못한 것이다.

awiat 을 써주자.