[vue.js] Rest API Http Method(GET/POST/PUT/DELETE)

기존에 Ajax로 서버와의 비동기통신을 하던 방식에서 vue.js와 호환을 위해 Axios를 사용하고 있다. 기존 Ajax에서 get, post 방식을 사용하던 방법과 유사한 점도 있으나 Restful 하게 사용하려다 보니 기본 설정 사항의 다른 점을 고려하며 개발해야하는 상황을 맞이하게 되었다.

대표적으로 Ajax의 Header의 기본 Content-type 은 아래와 같다.

application/x-www-form-urlencoded; charset=UTF-8

그러나 Axios의 경우 Javascript Object를 JSON으로 직렬화하기 때문에 기본 Content-type 은 아래와 같다.

application/json

npm 에서도 다음과 같이 설명하고 있다.

By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencoded format instead, you can use one of the following options.

위의 링크에서는 application/x-www-form-urlencoded 를 Content-type으로 하는 대안으로 몇가지 사례를 제시하고 있다.
URLSearchParams, querystring, form-data이다.

1. 이중에 POST 방식으로는 form-data의 방법으로 서버와 데이터를 교환할 수 있다.

2. GET방식은 Object를 그대로 params에 실어 보내거나, 데이터 조작이 필요하다면 key 값에 value값을 매핑시켜 실어 보낼 수 있다.

3. PUT방식은 POST방식에서 쓰는 form-data를 사용할 수 없으며, Object를 그대로 params에 실어 보내거나, params에 key, value를 매핑시켜 실어 보낼 수 있다. (※※※※※Spring의 특수한 상황인지 좀 더 알아봐야 한다.※※※※)

PUT 방식에서는 링크 참고

request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getAccessToken, removeAccessToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: '[베이스 URL를 입력해주세요]', // 스프링 개발용
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data

    return res
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

user.js

import request from '@/utils/request'

/* user 정보 가져오기 (GET) */
export function getUserList(query){
	return request({
		url: '[api 하위 주소]',
		method: 'get',
        params: query
      /*
      	params: {
        	user_seq : query.user_seq
        }
      */
	})
}

/* user 등록 보내기 (POST) */
export function userRegister(data){
	const frm = new FormData()
	frm.append('my_field', 'my value')
	frm.append('my_buffer', new Buffer(10))
	frm.append('my_file', fs.createReadStream('/foo/bar.jpg'))

	return request({
		url: '[api 하위 주소]',
		method: 'post',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
        data : frm
	})
}

/* user 정보 삭제하기 (PUT) */
export function deleteUser(user_seqs){
	return request({
		url: '[api 하위 주소]', //"base url을 제외한 리소스명(URI)"
		method: 'put',
		params: {
			user_seqs : user_seqs
		}
	})
}