[WEB] Axios의 정의와 Interceptors 초기 세팅

개요

사이드 프로젝트 내에서 Axios Interceptors 초기 설정 기능을 맡았는데, 먼저 공부하는 시간을 갖는 것이 좋을 것 같아 작성한 내용이다!

블로그에서도 글을 옮기면 좋을 것 같아 이렇게 포스팅을 한다 ~!

 

먼저 기능 개발 이전에 관련 정보들에 대해 먼저 알아보자!

 

`Fetch API` VS `AXIOS`

Fetch API

• body 안에 정보
• url은 () 안에 인자로
• body는 stringify()

const url = '요청할 주소';
const options = {
  method: 'POST',
  headers: { 
     'Accept': 'application/json',
     'Content-Type': 'application/json;charset=UTF-8' 
  },
  body: JSON.stringify({
     name: 'test'
  })
};

fetch(url, options)
  .then(response => response.json()) 
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

 

 

Axios

• data 안에 정보
• url은 option 객체 안에 값으로 삽입

const option = {
   url: '요청할 주소',
   method: 'POST',
   headers: { 
     'Accept': 'application/json',
     'Content-Type': 'application/json;charset=UTF-8' 
   },
   data: {
      name: 'test'
   }
};

axios(option)
   .then(response => console.log(response))
   .catch(error => console.error('Error:', error));

 

 

Axios란?

특징

• 운영 환경에 따라 브라우저간 `XMLHttpResquest` 객체 또는 `Node.js`의 `HTTP API`를 사용함
• ES6 Promise API 사용
• HTTP Methods 사용
• Request의 응답을 자동으로 JSON 형태로 만듦

 

GET / 데이터를 받을 때

서버에서 어떠한 데이터를 받아서 보여줄 때 사용, `response`는 `json`의 형태

const getLists = async () => {
   axios.get("요청할 주소")
   .then(res => {
     console.log(res.data)
   }).catch(err => {
     console.log(err);
   })
}

 

 

POST / 새로운 리소스를 생성할 때

메소드의 두번째 인자는 요청 주소로 보낼 데이터의 객체임

const postList = async () => {
const { data } = await axios.post(
	"요청할 주소", 
	"보낼 값(객체)", 
	{
		headers: {
			'Content-type': 'application/json',
			'Accept': 'application/json'
		}
	}).then(res => {
    	console.log(res.data);
	}).catch(err => {
    	console.log(err)
	})
}

 

 

DELETE / 데이터베이스에 저장된 내용을 삭제할 때

데이터베이스의 내용을 삭제, 두번째 인자를 전달하지 않음

const deleteList = async (listId) => {
	const { data } = await axios.delete(`요청할 주소/${listId}`)
}

 

 

PUT & PATCH / 저장된 내용을 수정할 때

• PUT : 보낸 내용으로 리소스를 덮어씁니다.
• PACTH : 보낸 내용으로 리소스의 일부를 변경합니다.

axios.put("요청할 주소", "덮어쓸 값", config)
axios.patch("요청할 주소", "일부만 바꿀 값", config)

 

 

 

Interceptors란?

• Interceptors 단어의 뜻 : 가로채는 사람, 방해자, 장애물
• axios Interceptors는 중간에서 request나 response를 가로채가는 기능

 

Axios Interceptors 적용하는 이유

백엔드와 통신 시 인증이 필요한 경우 헤더에 토큰을 넣어 메서드를 요청해야 함

const response = await axios({
  method: 'GET',
  url: 'url',
	headers: {
      Authorization: `Bearer ${token}`,
  },
});

 

인증이 필요한 모든 axios 요청에서 직접 헤더를 넣는 귀찮은 반복을

axios interceptor를 이용하여 해결할 수 있음 !!

 

1. Axios 인스턴스 만들기

`axios.create([config])`

• 사용자 지정 config로 새로운 Axios 인스턴스를 만들 수 있음

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

• `baseURL`
  • 엔드포인트의 기본 URL로, axios 인스턴스에서 보내는 모든 요청의 기본 URL을 지정
  • 요청을 보낼 때 상대적인 URL만 사용하면 해당 baseURL이 자동으로 앞에 붙게 됨.
• `timeout`
  • 요청에 대한 타임아웃을 설정
  • 이 시간(밀리초) 이내에 서버로부터 응답을 받지 못하면 요청이 실패하고 에러 발생
  • default: 2500
• `headers`
  • HTTP 헤더를 나타내는 객체
  • 요청 헤더에 추가할 사용자 지정 헤더를 지정하는 데 사용

 

2. Interceptors reponse 작성

• `request`가 전송되기 전에 실행되는 기능
• `request` 구성 또는 헤더를 수정하고, 인증 토큰 또는 기타 데이터를 추가하고, 서버에 요청을 보내기 전에 다른 작업을 수행할 수 있다.

`axios.interceptors.request`

// 요청 인터셉터 추가하기
axios.interceptors.request.use(
	(config) => {
    // 요청이 전달되기 전에 작업 수행
    return config;
  },
  (error) => {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

 

 

3. Interceptors reponse 작성

• response를 받은 후 실행되는 기능
• response가 호출 코드로 다시 전달되기 전에 response 데이터를 수정하거나, 오류를 처리하거나, 정보를 기록하거나, 다른 작업을 수행할 수 있다.

`axios.interceptors.response`

// 응답 인터셉터 추가하기
axios.interceptors.response.use(
	(response) => {x
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, 
	(error) => {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

 

 

 

Axios interceptors 초기 세팅하기

1. axios 설치하기

npm install axios
yarn add axios

 

2. axios interceptors 작성

`src/api/axios.ts`

import axios, {
  AxiosError,
  AxiosInstance,
  CreateAxiosDefaults,
  isAxiosError,
} from 'axios';
import { HttpStatusCode } from '@/constants/apiStatus';

const BASE_URL = ''; // 수정 필요

const setInterceptor = (instance: AxiosInstance) => {
  instance.interceptors.request.use(
    (config) => {
      const requestConfig = config;

      // header에 sessionStorage에 저장되어 있는 token을 포함한다고 가정
      // const accessToken = sessionStorage.getItem('token');

      // if (accessToken) {
      //   requestConfig.headers.Authorization = `Bearer ${accessToken}`;
      // }
      return config;
    },
    (err: AxiosError): Promise<AxiosError> => Promise.reject(err),
  );

  instance.interceptors.response.use(
    (response) => response,
    async (error) => {
      if (isAxiosError(error)) {
        if (error.response && error.response.data) {
          const { status, code, message } = error.response.data;
          console.log(status, code, message);

          if (status === HttpStatusCode.UNAUTHORIZED) {
            // 다시 로그인
          }

          if (status === HttpStatusCode.INTERNAL_SERVER_ERROR) {
            // 에러
          }

          return Promise.reject(error);
        }
      }

      console.error(error);
      return Promise.reject(error);
    },
  );

  return instance;
};

const options: CreateAxiosDefaults = {
  headers: {
    Accept: '*/*',
    'Content-type': 'application/json; charset=UTF-8',
  },
  baseURL: BASE_URL,
};

export const ax = axios.create(options);

setInterceptor(ax);

 

 

3. Http 상태에 따른 에러 enum 정의

`src/constants/apiStatus.ts`

export enum HttpStatusCode {
  SUCCESS = 200,
  BAD_REQUEST = 400,
  UNAUTHORIZED = 401,
  INTERNAL_SERVER_ERROR = 500,
}

 

 

이렇게 하면 끝이당 ~~

 

 

 

---

 

( •̀ω•́ )و✧ 한 줄 컷 !

 

그렇다면 오늘도 면접관이 만약에

"Axios Interceptors란 무엇이고 사용 이점엔 뭐가 있나요?" 라고 한다면 ?!

 

Axios Interceptors는 HTTP 요청이나 응답을 가로채서
전처리 또는 후처리할 수 있는 기능입니다.

이를 통해 공통적인 헤더 추가, 인증 토큰 자동 처리, 오류 응답 일괄 처리,
요청/응답 로깅 등의 작업을 효율적으로 관리할 수 있습니다.

라고 대답할 수 있을 것이다 ~~ 그럼 오늘도 끝 !!