axios란?

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리다.

특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
• HTTP 요청과 응답을 JSON 형태로 자동 변경
• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소

우리가 사용하고 있던 axios 사용법

  const getData = () => {
    axios
      .get(process.env.NEXT_PUBLIC_API_BASEURL + '/api/v1/chat/talkplus/product/', {
        params: { id },
        headers: { Authorization: `Bearer ${cookies.userInfo.ACCESSTOKEN}` },
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

이렇게 구현했을 경우 단점

• 기본 서버 URL을 계속해서 작성해야함
• 항상 headers에 토큰 넣는 코드를 작성해야함

axios custom

import axios from 'axios';
import { Cookies } from 'react-cookie';

//TODO: axios header에 토큰값 기본값으로 넣어주기
// 현재 로그인이 불가능한 상태이므로 확인이 불가능함
const cookies = new Cookies();
console.log(cookies.get('userInfo'));

export const customAxios = axios.create({
  baseURL: `${process.env.NEXT_PUBLIC_API_BASEURL}/api/v1`,
  headers: {
    Authorization: `Bearer ${이곳에 토큰값이 들어갈 예정}`,
  },
});

장점

• baseURL을 하나로 통일 가능
  • baseURL 변경이 쉬움
  • axios를 사용하는 곳에서 /product/all 이런식으로만 사용하면 되므로 가독성이 좋아짐
• 토큰값을 항상 안써줘도되서 가독성이 좋아짐

추후 개발 예정

• 에러 핸들링 customAxios에서 처리하기
• 모든 axios를 customAxios로 수정

React에서 axios 모듈화 하기 🎶