우리는 axiox를 이렇게 사용한다.

ajax는 비동기 서버통신 방법이며 vue에서는 흔히 axiox를 사용한다.
그러나 axiox의 여러 속성을 매 컴포넌트마다 작성하면 코드가 길어지고 가독성이 떨어지기 때문에, 그 속성들을 wrapper로 한번 감싸 인자로만 넘겨 불필요한 코드를 줄이고 가독성을 높일 수 있다.

그 방법을 소개하고자 한다.

1. env

먼저 .env확장자의 파일에 환경 변수를 임의로 몇 가지 세팅 해 놓자

VUE_APP_API_DOMAIN= http://localhost:8080
VUE_APP_FRONT_DOMAIN= localhost

원하는건 몇 개던 작성해도 된다. 여기서는 API도메인 주소와 Front 주소만을 예로 든다.
이렇게 미리 정의 해 놓으면 어디서든 환경변수를 가져다 사용할 수 있다.
Constants.js처럼 상수를 정의해 사용한다고 생각하면 쉽다.

Constants.js 예

  EVAL_ROLE_TYPE: {
    PROFESSOR: 'HEAD_PROFESSOR',
    EVALUATOR: 'EVALUATOR',
    ASSISTANT: 'ASSISTANT'
  },

예전 인터셉터 포스팅에서 대학교 회원들의 RoleType을 나눴었는데 프론트에서도 사용하고 있다.

아무튼 env파일에 미리 서버통신에 필요한 도메인을 지정 해 준다.

그리고 wrapper 디렉토리에 axiox를 커스텀 할 js파일을 만들어주고

const API_DOMAIN = process.env.VUE_APP_API_DOMAIN

const FORBIDDEN = 403
const UNAUTHORIZED = 401
const BAD_REQUEST = 400
const INTERNAL_SERVER_ERROR = 500

이런 형태로 정의해 사용한다. 이제 vue의 빌드 환경에 따라 각자 다른 요청 도메인이 API_DOMAIN에 담기게 된다.

2. wrapper

vue2

export const ajax = (method, url, data, header, params, errTitle, alert = true) => {
  let accessToken = store.getters['users/loggedInAccessToken']
  let locale = store.getters['i18N/currentLocale']
  store.commit('SET_LOADING', true)
  return axios({
    method,
    url: API_DOMAIN + url,
    data,
    headers: { ...header, 'Content-Type': 'application/json; charset=utf-8', 'Accept-Language': locale, Authorization: `Bearer ${accessToken}` },
    params
  })
    .then(result => {
      return result.data
    })
    .catch(result => {
      exception(result, errTitle, alert)
    }).finally(() => {
      store.commit('SET_LOADING', false)
    })
}

vue3

export const ajax = (
  method,
  url,
  data,
  header,
  params,
  errTitle,
  alert = true
) => {
  const accessToken = usersStore().loggedInAccessToken
  const locale = i18nStore().currentLocale
  loadingStore().setLoading(true)
  return axios({
    method,
    url: API_DOMAIN + url,
    data,
    headers: {
      ...header,
      'Content-Type': 'application/json; charset=utf-8',
      'Accept-Language': locale,
      Authorization: `Bearer ${accessToken}`
    },
    params
  })
    .then((result) => {
      return result.data
    })
    .catch((result) => {
      exception(result, errTitle, alert)
    })
    .finally(() => {
      loadingStore().setLoading(false)
    })
}

로그인 후 받아오는 토큰과 API를 요청할 때의 지역정보는 store에서 꺼내 사용한다.
method에는 HttpMethod를, data에는 ResquestBody 폼데이터, header도 미리 정의 해 놓고 params에는 requestParam을 넣어준다. catch문의 exception은 임의로 구현한 클래스이다.

JS파일 말미에 export default ajax를 작성해 어느 곳에서든 ajax라는 이름으로 커스텀 wrapper를 씌운 axios를 사용할 수 있게 되었다.

ajax('GET', '/api/url', 'fromData', null, '{ param: value }')
.then(response => {
console.log(response)})
.catch(err => { alert(error.message) })

같은 형태로 사용하면 된다.