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 };
반응형