Created axios instance to add interceptor.

[10cheon00]

Axios Config

axios api를 사용할 때 여러가지 옵션을 줄 수 있다.

• baseURL url을 절대경로로 사용하지 않을 때, baseURL이 앞에 붙게 된다. 백엔드api를 사용할 때마다 중복되는 url을 제거할 용도로 쓸 수 있따.
• url
• method
• headers (세세하게 파면 많을것 같다)
• timeout 응답까지의 제한시간이다. 초과하면 error객체에 code가 딸려서 온다.
• params url파라미터다
• data
• auth 유저 정보를 넘겨서 인증받을 수 있게 하는건데, Bearer라면 header를 이용하라고 한다.
• validatedStatus http코드를 제한하여 특정 코드만 검증을 통과하도록 한다. 그렇지 않다면 무조건 거부한다.

interceptor를 사용해 에러를 핸들링할 필요성이 생겼다. 그런데 instance를 만들어야만 중복을 제거하면서 명시적으로 이용할 수 있었다. 더불어 기존 폴더 구조도 axios를 난잡하게 이용할 가능성이 있었다.

store/
|-- AxiosApi.js (ArticleApi, ProfileApi를 포함하는 모듈)
|-- AxiosApi/
|   |-- ArticleApi.js
|   `-- ProfileApi.js
`-- store.js (AxiosApi를 포함)

이 구조에서 axios instance를 만들고 관리할 공간이 없었다. AxiosApi내에 있는 vuex 모듈들은 axios를 import하고 있었다. 새로 instance를 만들어 두고 그걸 import하는 방법으로 바꾸었다.

store/
|-- BackendApi/
|   |-- articleApi.js (axiosWrapper를 포함)
|   |-- axiosWrapper.js 
|   |-- module.js (articleApi, profileApi를 포함)
|   `-- profileApi.js (axiosWrapper를 포함)
`-- store.js (BackendApi/module를 포함)

store <- module <- [ articleApi, profileApi, ... ] <- axiosWrapper 의존성 방향이 명확해졌다.

이제 axios({ ... })말고 axiosInstance({ ... })로 바꾸어 axios를 사용할 때마다 interceptor를 사용할 수 있게 되었다.