ajax는 비동기 서버통신 방법이며 vue에서는 흔히 axiox를 사용한다.
그러나 axiox의 여러 속성을 매 컴포넌트마다 작성하면 코드가 길어지고 가독성이 떨어지기 때문에, 그 속성들을 wrapper로 한번 감싸 인자로만 넘겨 불필요한 코드를 줄이고 가독성을 높일 수 있다.
그 방법을 소개하고자 한다.
먼저 .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에 담기게 된다.
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)
})
}
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) })
같은 형태로 사용하면 된다.