fetch API를 사용하여 코드 라인 수를 줄여보자

huihui·2021년 1월 16일
2

🎯fetch API

📌 ajax를 사용하는 여러 가지 방법

ajax를 사용하는 방법은 여러 가지가 있습니다.

  1. XMLHttpRequest 객체
  2. fetch api
  3. jQuery
  4. axios 라이브러리

이번 포스팅에서는 1, 2번을 비교해보면서 fetch api의 장점을 알아보겠습니다.

📌 XMLHttpRequest


첫 번째로 가장 고전적인으로 사용하는 방식입니다.
onreadystatechange을 사용했습니다.

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let response = JSON.parse(xhr.response);
        console.log(response);
    }
};

xhr.open('get', 'https://yts.mx/api/v2/list_movies.json');
xhr.send();

https://yts.mx 이곳은 json 객체를 제공해주는 괜찮은 사이트입니다.

위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.

위의 코드를 그나마 편하게 바꾸면 아래처럼도 가능합니다.

let xhr = new XMLHttpRequest();

xhr.onload = () => {
    let response = JSON.parse(xhr.response);
        console.log(response);
}

xhr.open('get', 'https://yts.mx/api/v2/list_movies.json');
xhr.send();

📌 fetch

이번에는 fetch api를 사용해보겠습니다.

fetch('https://yts.mx/api/v2/list_movies.json')
    .then((response) => response.json())
    .then((json) => {
        console.log(json);
    });

출력 결과는 위와 동일합니다.

fetch는 Promise 기반입니다. 그래서 then을 사용하여 서버로부터 받은 데이터를 활용할 수 있습니다.

첫 번째 줄에서는 fetch를 통해 웹 브라우저에게 'https://yts.mx/api/v2/list_movies.json' 여기서 데이터를 받아와줘! 라는 요청을 합니다.
이후 데이터를 정상적으로 받아오면 .then()에 걸려 콜백함수가 실행됩니다.
에로우 함수를 사용했기 때문에 response.json()이 곧바로 리턴되어 다음 .then에 걸리게 됩니다.

확실히 fetch api를 사용하는 것이 XMLHttpRequest 객체를 사용하는 것보다 코드의 간결성, 가독성 측면에서 유리한 것 같습니다.

2개의 댓글

comment-user-thumbnail
2021년 2월 5일

훨씬 간결하고 좋네요..
잘보고갑니다!

답글 달기
comment-user-thumbnail
2021년 3월 8일

저는 axios랑 async & await을 주로 사용하는데, 기본은 방식은 fetch를 따르는 거 같아요
vanilla js에서도 fetch를 쓰는 거 같고.. 저도 사용해봐야겠네요
잘 보고 갑니다~^^b

답글 달기