반응형
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 };
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
130. posts 수정 API 구현 | this.$route.params.id | Dynamic Route Matching 사용 (0) | 2023.02.19 |
---|---|
129. posts 삭제 API 구현 | 삭제 후 list UX 개선 (0) | 2023.02.19 |
127. Validation Check | 길이 유효성 검사 기능 (0) | 2023.02.19 |
126. 학습노트 등록 API 구현 | 학습노트 등록 Page Router 생성 (0) | 2023.02.19 |
125. 페이지로 이동 버튼 생성 | icoicons 아이콘 적용 방법 (0) | 2023.02.19 |