vue.js/vue.js 2

128. auth, posts API 함수 분할 | js파일 분리 | 로그인 회원가입, Post CRUD API 분리

DEV-Front 2023. 2. 19. 16:39
반응형

1. 기존 api / index.js (API 분할 전)

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


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

function createInstanceWithAuth(url) {
  const instance = axios.create({
    baseURL: `${process.env.VUE_APP_API_URL}${url}`,
  });
  return setInterceptors(instance);
}
const instance = createInstance();
const posts = createInstanceWithAuth('posts');

// 회원가입 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 };

2. auth.js 생성 (로그인, 회원 가입, 회원 탈퇴 API 함수)

// 로그인, 회원 가입, 회원 탈퇴 API 함수

import { instance } from '@/api/index';

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

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

export { registerUser, loginUser };

3. posts.js 생성 (학습노트 조작과 관련된 CRUD API 함수 파일)

// 학습노트 조작과 관련된 CRUD API 함수 파일
import { posts } from '@/api/index';

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

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

export { fetchPosts, createPost };

4. index 정리

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

// 액시오스 초기화 createInstanceWithAuth
function createInstance() {
  return axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });
}

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

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

export { instance, posts };

 

반응형