👀 fetch API

비동기 요청의 가장 대표적인 사례는 네트워크 요청이며, 네트워크를 통해 이루어지는 요청은 다양한 형태가 있다.

그 중에서 URL로 요청하는 경우가 가장 일반적이며, URL로 요청하는 것을 가능하게 해주는 API가 fetch API 이다.

아래의 예시를 보면, 항상 동적으로 변하는 정보와, 고정적인 정보가 분리되어 있는데, 최신 뉴스나 오늘 날씨(날씨/미세먼지 정보)는 동적으로 데이터를 받아야하는 정보이다.

이런 경우, 항상 동적으로 변하는 정보(뉴스, 날씨)만 업데이트하기 위해서는 요청 API를 이용해야하는데, fetch API를 이용해 해당 정보를 원격 URL로부터 불러오는 경우를 살펴보자.

아래는 원격 URL로부터 정보를 받아와서 특정 DOM element를 업데이트하는 컨셉을 도식화한 그림이다.

fetch API는 위와 같이, 특정 URL로부터 정보를 받아오는 역할을 하며, 이 과정이 비동기로 이루어지기 때문에, 경우에 따라 다소 시간이 걸릴 수 있다.

이렇게 시간이 소요되는 작업을 요구할 경우에는 blocking이 발생하면 안 되므로, 특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우는 경우도 있다.

✔ 사용 예시

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

위의 코드를 크롬 브라우저 개발자 도구 콘솔창에 입력 후, 실행한 출력 결과는 아래와 같다.

Reference: 코드스테이츠