Fetch와 Axios의 차이점을 알아보자!

흩날리는추억·2024년 3월 27일

✔️ 들어가기 전

프로젝트 주제를 정하기 위해 오픈 API를 둘러보던 중 갑자기 fetch와 axios를 조금 더 알고 싶어졌습니다. fetch와 axios는 둘 다 HTTP 요청을 생성하고 처리하는 JavaScript 라이브러리이지만, 몇 가지 중요한 차이점이 있습니다. 둘의 차이점에 대해 공부하고 다른 사람과 공유할 수 있도록 이번 글을 작성해보겠습니다.

📝 미리 알면 좋은 개념들

🔍 Fetch

Fetch API는 2015년에 등장한 비교적 최근에 도입된 웹 표준입니다. 이전에는 대부분의 웹 개발자가 AJAX 요청을 처리하기 위해 XMLHttpRequest 객체를 사용했습니다. Fetch는 Promise를 기반으로 구성되어 있어서 XMLHttpRequest 보다 더 간편하게 사용할 수 있습니다.

Fetch 문법

기본 문법
fetch(url [, options])
  .then(response => {
    // 응답을 처리하는 코드
  })
  .catch(error => {
    // 오류를 처리하는 코드
  });
url: 요청을 보낼 URL로 필수 매개변수

options (선택사항): 요청에 대한 설정을 지정하는 객체로 메서드, 헤더, body 등의 정보들을 포함

GET 요청 예시

fetch('example url')
  .then(response => {
    // 응답을 처리하는 코드
    return response.json(); // JSON 형식으로 파싱된 데이터를 반환하는 Promise를 반환
  })
  .then(data => {
    // JSON 데이터를 처리하는 코드
    console.log(data);
  })
  .catch(error => {
    // 오류를 처리하는 코드
    console.error('There was a problem with the fetch operation:', error);
  });

커스텀 설정

fetch(url, {
  method: "GET", //  (POST, PUT, DELETE, etc.)
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({}),
});

장점

fetch는 기본적으로 제공되는 내장 API이므로 라이브러리를 추가로 설치할 필요가 없음
fetch는 간결하고 직관적인 API를 제공하여 코드를 간단하게 작성

단점

IE에서는 부분적인 지원만 제공
fetch는 기본적인 요청 및 응답 처리 이외의 기능은 제공하지 않으므로, 추가적인 기능을 구현
JSON변환, 문자열변환 과정이 별도로 필요

🔍 Axios

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 라이브러리로 Fetch와는 다르게 설치하고 import해야 사용할 수 있습니다.

npm $ npm install axios
bower $ bower install axios
yarn $ yarn add axios

Axios 문법

기본 문법
import axios from "axios";

axios.get(url[, config])
  .then(response => {
    // 응답을 처리하는 코드
  })
  .catch(error => {
    // 오류를 처리하는 코드
  });
url: 요청을 보낼 URL로 필수 매개변수

config (선택사항): 요청에 대한 구성 설정을 지정하는 객체로 헤더 설정, 인증 토큰, 요청 취소 등의 정보를 포함

GET 요청 예시

axios.get('example url')
  .then(response => {
    console.log(response.data); // 서버로부터 받은 데이터 출력
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });