SEB Section 2 Fetch

네트워크 요청

비동기 요청으 대표적 사례로는 네트워크 요청이 있다. 그 중에서도 URL로 요청하는 경우가 가장 흔하다. URL로 요청하는 걸 가능하게 해주는 API가 fetch API이다.

fetch API

fetch API는 특정 URL로부터 정보를 받아오는 역할을 한다. 이 과정이 비동기로 이루어져 다소 시간이 걸릴 수 있다. 시간이 소요되는 작업을 요구하는 경우 blocking이 발생되면 안 되므로, 로딩 창을 띄우기도 한다.

fetch(url)
  .then((response) => response.json()) // 자체적으로 json() 메서드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달합니다
  .then((json) => console.log(json)) // 콘솔에 json을 출력합니다
  .catch((error) => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다

• json URL를 통해 정보를 받아오면서 어떤 형태의 정보를 가져오는가를 살펴 봐야 한다. 대부분의 정보들은 우리가 배웠었던 json 형태로 이루어져 있어서 파싱을 해야 하는지에 대한 여부를 확인 해야 한다. 하지만 fetch API 내부에 json 파싱을 하는 메소드가 있어 사용을 하면 된다.

• 비동기 동작 promise의 형식으로 이루어져 있어서 비동기 동작을 한다. 따라서 then과 catch을 사용하여 받아오는 정보를 이용할 수 있다.