개요

fetch로 api를 가져오던중에 Promise { } 이라는 글자를
마주 했다. 그래서 바로 검색해서 찾아보니 promise는 3가지 상태를 갖는 다는 것이다.
이미 예전에 배웠지만 그때는 뭔지 몰랐다가 다시 마주치니 이제야
뭔지 알게 된것 같다.

일단 promise는 3가지 상태가있는다.

pending(대기), fulfill(이행), reject(거부) 상태를 갖는다.
그래서 내가 마주한 저 상황은 지금 대기 상태라는 것이다.

URL Data

{
userId: 1,
id: 1,
title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
body: "quia et suscipit
suscipit recusandae consequuntur expedita et cum
reprehenderit molestiae ut ut quas totam
nostrum rerum est autem sunt rem eveniet architecto"
}

Fetch

두가지 방식에 fetch 이다. 정상적으로 실행이 된다면 위에 URL Data에서 가져온
값이 출력 되어야 한다.

function fetchAndPrintJson(url) {
  return fetch(url)
    .then((response) => response.json())
    .then((data) => console.log(data));
}

async function fetchAndPrintJson(url) {
  // 매개변수로 받은 url 주소의 데이터를 fetch 받아와서 출력하는 함수를 작성하세요.
  const response = await fetch(url);
  const jsonData = await response.json();
  return console.log(jsonData);
}

fetchAndPrintJson("https://jsonplaceholder.typicode.com/posts/1");

코드 대로만 하면 정상적으로 출력이 된다.
그렇지만 처음에 나는

async function fetchAndPrintJson(url) {
// 매개변수로 받은 url 주소의 데이터를 fetch 받아와서 출력하는 함수를 작성하세요.
const response = await fetch(url);
return console.log(response.json());
}

fetch에서 받아온 값 response를 바로 json형태로 출력하려 했다.
하지만 fetch는 promise를 반환 하기 때문에 아래와 같은 Promise { pending }
상태 였던 것이다.

그래서 const jsonData = await response.json(); 로 fulfill 상태로
이행 시켜야 정상적인 데이터를 받아올 수 있다.

결론

내가 이해한게 맞는지 잘 모르겠지만, 확실한건 잘 모르고 썼던 promise에 대해
다시한번 보면서 정리가 조금은 더 된 것 같다.