API Modularization(모듈화)

현재 axios인스턴스 생성은 전부 interceptor에 의해 header-Authorization에 token이 담겨 호출된다.

로그인, 회원가입의 경우 token이 필요없기 때문에 baseURL만 설정후 생성,
이외 api는 interceptor를 포함하여 생성한다.

import { setInterceptors } from './common/interceptors';

function createInstance() {
  return axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });
}

function createInstanceWithAuth() {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });
  return setInterceptors(instance);
}

const instance = createInstance();
const posts = createInstanceWithAuth();

// 회원가입 API
function registerUser(userData) {
  return instance.post('signup', userData);
}

// 로그인 API
function loginUser(userData) {
  return instance.post('login', userData);
}

// 학습 노트 데이터를 조회하는 API
function fetchPosts() {
  return posts.get('posts');
}

// 학습 노트 데이터를 생성하는 API
function createPost(postData) {
  return posts.post('posts', postData);
}

export { registerUser, loginUser, fetchPosts, createPost };

함수 기능에 따라 분류도 하자.
그전에, 파일이 분리되고 생성했던 axios instance를 재사용해야하기 때문에 export 해준다.

export const instance = createInstance();
export const posts = createInstanceWithAuth();

// api/auth.js
import { instance } from './index';

// 회원가입 API
function registerUser(userData) {
  return instance.post('signup', userData);
}

// 로그인 API
function loginUser(userData) {
  return instance.post('login', userData);
}

export { registerUser, loginUser };

이제 auth.js는 회원가입, 로그인의 기능만 가지고 있다.

// api/posts.js
import { posts } from './index';

// 학습 노트 데이터를 조회하는 API
function fetchPosts() {
  return posts.get('posts');
}

// 학습 노트 데이터를 생성하는 API
function createPost(postData) {
  return posts.post('posts', postData);
}

export { fetchPosts, createPost };

이제 posts.js는 post관련 api만 묶였다.

변경된 index.js파일을 살펴보자

import { setInterceptors } from './common/interceptors';

function createInstance() {
  return axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });
}

function createInstanceWithAuth() {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });
  return setInterceptors(instance);
}

const instance = createInstance();
const posts = createInstanceWithAuth();

이제 index.js 파일은 axios instance파일만 생성하고 내보내는 기능만 가진다.

지금은 api함수가 몇개 없지만, 기능이 많아질 수록 모듈화의 장점은 극대화 된다.