Axios 와 Fetch

밍글·2023년 3월 17일

Project회고록

목록 보기

2/3

⌨️서론

처음 프로젝트를 시작했을 때, 서버와 통신하기 위한 API연결을 뭐로 할까에 대한 논의가 있었다. 처음에 찾아보았을 때는 자바스크립트의 내장 라이브러리로 있는 fetch가 좀 더 쉬운 느낌이 들어서 fetch방식을 선택했었다.
그러나 이번 프로젝트를 할 때에는 다른 방식으로 해보고 싶었고 그 중 많이 사용하는 axios를 사용하게 되었다. 이번에는 axios와 fetch의 각각의 정의와 사용방식에 대해 다뤄보고자 한다.📚

Fetch

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다. Fetch API가 제공하는 전역 fetch()메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있다.
참고자료 : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

fetch의 기본 코드방식

fetch('url주소',options)
  .then((response) => response.json())
  .then((data) => console.log(data));

fetch의 두번째 인자인 options에는 다음과 같이 커스텀하여 요청할 수 있다.

fetch(url, {
  method: "GET", // 다른 옵션도 가능하다 (POST, PUT, DELETE, etc.)
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({}),
});

💡 fetch는 직접 JSON 문자열로 직렬화하거나 본문을 직접 받을 수 있는 기능이 없다.
그래서 문자열로 직렬화해서 보낼때는 JSON.stringify({}), response에서 JSON 본문 콘텐츠를 추출하기 위해서는 json() 메서드를 호출해야 한다.💡

Axios

Axios설치

npm을 사용하는 경우
npm install axios
그 후 project에서 import하기
import axios from "axios"

Axios의 정의와 특징

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.

Axios의 특징은 전반적으로 fetch와 비슷하지만 다른 점은 다음과 같다.

JSON 데이터 자동 전환
axios는 JSON 데이터를 자동으로 전환해주기 때문에 json()문법을 사용하지 않아도 된다.

에러 처리
fetch와 axios는 모두 이행되거나 거부될 때 promise를 반환한다. Promise가 거부되면 catch()를 사용하여 에러를 처리할 수 있다. axios로 에러를 처리하는 방법은 fetch에 비해 더 간결하다.
fetch의 경우 404나 다른 에러를 받아도 네트워크 에러가 아닌이상 거부를 하지 않기 때문에 수동으로 처리해야 하지만 axios는 그러지 않아도 된다.

기본적으로 가지고 있는 다양한 기능
fetch에 비해 axios는 디테일한 기능을 가지고 있다. 예를 들면 인터셉터 기능이 있다. fetch는 인터셉터 기능이 없기 때문에 직접 구현을 해주어야 하지만 axios는 다음과 같이 코드를 짤 수 있다.
// 요청 인터셉터 추가하기(axios)
axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });
// 응답 인터셉터 추가하기(axios)
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드일 경우
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드일 경우
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

axios의 기본 코드방식

axios는 두 가지의 기본 방식을 가지고 있다.

1️⃣ axios(url, {options(data나 config 등)})
//예시
axios("url주소", {
  method: "get", // 다른 옵션도 가능하다 (post, put, delete, etc.)
  headers: {},
  data: {},
});
2️⃣ axios.http메소드(url, data, config)방식
http메소드 중 data가 없는 메소드는 ex) axios.get(url,config)처럼 작성하면 된다.
axios.post('url주소', {
    data
  },{config})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
3️⃣ 사용자 지정 config로 새로운 axios인스턴스 만들수도 있다.
const instance = axios.create({
  baseURL: 'url주소',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

💻마무리

fetch와 axios를 둘 다 사용해보았는데 개인적인 선호도에 따라 다르겠지만 fetch보다 기능이 많고 json을 자동으로 변환해준다는 점에서 axios를 좀 더 선호할 것 같다.🤔
앞으로는 axios를 잘 이용을 해서 API 연결을 해봐야겠다🤩 이번 프로젝트를 하며 잘 바꿨다는 생각이 들었다.
다음 포스팅에는 React quill editor에 관해 다뤄보도록 하겠다.