Axios를 모듈화 기록기

프로젝트를 진행하는 중에 가장 중요한 것은 재사용 로직을 공통 로직으로 만드는 것이라고 생각합니다! React의 경우 Hooks를 통해 재사용이 가능하지만 Vue에서는 Hooks와 비슷한 Composable 메서드가 사용 가능합니다. 이를 통해서 Axios를 공통으로 만드는 로직을 작성해보겠습니다!

composable 이란?

Vue 앱의 컨텍스트에서 컴포저블은 Vue 컴포지션 API를 활용하여 상태 저장 로직를 캡슐화하고 재사용하는 함수입니다.

Composable은 Vue의 Composition API를 .vue 파일이 아닌 .js, .ts와 같은 파일에서 사용 가능하도록하여 공통 로직을 재사용할 수 있도록 구현한 메서드를 말합니다. composable 메서드는 React Hook와 같이 useXXX와 같은 naming 규칙을 따르고 있습니다.

composable로 axios 커스텀하기

axios의 GET, POST, PUT, DELETE 기능을 composable을 통해 재사용 가능하게 만들 수 있습니다!

import axios from 'axios';
import {ref} from 'vue;
//DEFAULT Instance 생성
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});
//에러, 데이터 전처리
instance.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    console.error('Request error:', error);
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error('Response error:', error);
    return Promise.reject(error);
  }
);

export default function useAxios() {
	const data = ref(null);
    const error = ref(null);
    const isPending = ref(false);
  const $get = async (url, params = {}, headers = null) => {
    try {
      isPending.value = true;
      data.value = await instance.get(url, {
        params,
        headers: headers ?? instance.defaults.headers,
      });
      return result.data;
    } catch (err) {
      console.error('GET request error:', err);
      error.value = err;
    } finally {
    	isPending.value = false;
    }
  };

  const $post = async (url, data, headers = null) => {
    try {
      isPending.value = true;
      data.value = await instance.post(url, data, {
        headers: headers ?? instance.defaults.headers,
      });
      return result.data;
    } catch (err) {
      console.error('POST request error:', err);
      error.value = err;
    } finally {
    	isPending.value = false;
    }
  };

  const $put = async (url, data, headers = null) => {
    try {
       isPending.value = true;
      data.value = await instance.put(url, data, {
        headers: headers ?? instance.defaults.headers,
      });
      return result.data;
    } catch (err) {
      console.error('PUT request error:', err);
      error.value = err;
    } finally {
    	isPending.value = false;
    }
  };

  const $delete = async (url, params = {}, headers = null) => {
    try {
    	isPending.value.= true;
      data.value = await instance.delete(url, {
        data: params,
        headers: headers ?? instance.defaults.headers,
      });
      return result.data;
    } catch (err) {
      console.error('DELETE request error:', err);
      error.value = err;
    } finally {
    isPending.value = false;

    }
  };

  return {
    $get,
    $post,
    $put,
    $delete,
  };
}

위의 코드는 axios를 composable methood로 변경하여 GET, PUT, POST, DELETE REST API를 만든 코드입니다. Header와 Data를 동적으로 변경하여 재사용 가능하도록 구현했으며 전역적으로 axios instance를 만들어 재사용 가능하도록 구현했습니다.

정리

composable 메서드는 React Hook와 거의 똑같은 기능이라고 생각합니다. composable 메서드 또한 ref를 통해 DOM을 조작할 수 있고, 여러 재사용 로직을 구현할 수 있는 필수적인 기능이라고 생각합니다. 갈수록 Composition API에 지원이 많아지는 만큼 vue를 사용한다면 자세하게 알아놓는게 좋다고 생각합니다 ㅎㅎ 더 좋은 로직이 있다면 언제든지 피드백 부탁드립니다!

참고

Vue3 공식 사이트