Vue.js 끝내기 No.12(API 함수 모듈화,Delete,)

1.로그인 /회원가입

 

2.게시글 조회 /게시글 작성

 

이 두가지로 API 모듈화를 해보려고 한다.

각각의 접근 URL도 다르고 게시글 같은 경우는 로그인 회원가입과 달리 headers에 authorized가 필요하므로

 

우선 api/index.js

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

export function createInstance() { // 정말 기본 URL만 셋팅
  return axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });
}

// 인
export function createInstanceWithAuth(url) { // Token값과 특정 url을 붙여서 셋팅
  const instance = axios.create({
    baseURL: `${process.env.VUE_APP_API_URL}${url}`,
  });
  return setInterceptors(instance);
}

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

api/auth.js

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

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

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

export { registerUser, loginUser };

api/posts.js

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

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

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

export { fetchPosts, createPost };

 

모듈화는 언제나 그렇듯 import export만 잘하면 된다. 

 

Delete기능은 간단했다.

버튼 클릭 -> Delete이벤트 바인 -> API method=delete, localhost:3000/posts/{_id} => 그리고 refresh 이벤트를

emit으로 부모에게 날려서 Main(부모)에서 게시글들을 refresh하면 끝

 

그리고

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

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

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

// 학습 노트 데이터를 삭제하는 API
function deletePost(postId) {
  return posts.delete(postId);
}

export { fetchPosts, createPost, deletePost };

 

delete에는 왜 '/'가 없느냐?

API 함수의 규칙 때문이다. 기본적으로 get, post, put, delete API를 사용할 때 첫 번째 인자가 url이기 때문에

인스턴스로 공통 URL을 잡아줬다고 하더라도 일단 `/`을 넘겨야한다.

같은 맥락에서 put, delete와 같이 id가 넘어가야 하는 것은 그냥 id만 넘겨도 됨.