Promise와 fetch API (2) fetch API란

이전 글에 이어서 fetch API에 대해서 공부했다.

fetch API는 특정 URL로부터 정보를 받아오는 역할을 해준다. fetch API를 통해 정보를 받아오게 되면 비동기로 이루어지기 때문에  다소 시간이 걸린다면 blocking이 발생하면 안되므로, 특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우는 경우도 많다.

간단한 예제를 통해 fetch API의 사용법을 알아보겠다.

let url = 'https://apiURL';

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

 

원하는 url을 fetch()의 인자로 넣어준 뒤 그 값을 json 형태로 변환시켜 넘겨주면 이 값을 다룰 수 있게 된다. 

fetch api 역시 Promise의 형식을 사용하므로 쓰는 방법이 매우 유사하다. (Promise의 단점을 보완한 최신 문법이다.)

다음은 async await 키워드를 이용해 여러개의 fetch api을 실행한 값(Promise 형태)을 넘겨준 예시이다.

async await를 이용하면 Promise.all이 없어도 다양한 Promise 형태의 값을 병렬적으로 처리하는 것이 가능하다.(변수에 담고 사용 가능)

async function getNewsAndWeatherAsync() {
  let obj = {};
  let item1 = await fetch(newsURL) // 변수에 fetch의 결과를 담기
    .then(response => response.json())
    .catch(error => console.log(error));
  let item2 = await fetch(weatherURL)
    .then(response => response.json())
    .catch(error => console.log(error));
  obj.news = item1.data; // 담긴 변수의 값 활용
  obj.weather = item2;

  return obj;
}

Promise와 형식이 유사하여 Promise를 제대로 이해한다면 fetch도 문제없이 사용 가능 함을 알 수 있었다.