@newbiz/axios-libs
Version:
신사업 프론트엔드 Axios 래핑 라이브러리
118 lines (101 loc) • 3.89 kB
Markdown
# Axios Libs
신사업개발실 서비스/어드민 프론트엔드 Axios 래핑 라이브러리.
> This project was generated by [Vessel](https://www.npmjs.com/package/@mornya/vessel).
For a simple and quick reference, click [here](https://mornya.github.io/documents/guide/vessel.md).
## About
Axios 라이브러리를 래핑한 RESTful API 처리 라이브러리.
## Installation
해당 모듈을 사용 할 프로젝트에서는 아래와 같이 의존성 모듈로 설치한다.
```bash
$ npm install --save @newbiz/axios-libs
or
$ yarn add @newbiz/axios-libs
```
## Usage
최초 랜더링 되는 앱에 아래와 같이 axiosDefaultConfig를 이용하여 설정 부분을 추가해주면 된다.
### `Vue.js` example
```ecmascript 6
import { axiosDefaultConfig } from '@newbiz/axios-libs'
export default {
...
created () {
...
axiosDefaultConfig({
baseURL: '/test',
method: 'get',
timeout: 3000,
isThrowsOnError: true,
onInvalidate (which, error) {
console.log('is error on request or response?', which)
console.error(error.message)
},
})
...
},
...
}
```
`axios` 라이브러리는 아래와 같이 import하여 사용한다.
```ecmascript 6
import { axios } from '@newbiz/axios-libs'
```
## Configuration
axiosDefaultConfig() 메소드는 이미 오버라이드 된 axios 기본 설정을 사용자에 맞게 오버라이드 시켜줄 수 있다. interface 선언과 아래 샘플을 참고하면 된다.
```typescript
import { axiosDefaultConfig, AxiosRequestConfig } from '@newbiz/axios-libs';
const axiosConfig: AxiosRequestConfig = {
defaults: { // default axios request config
baseURL: '',
headers: {
common: {
'Content-Type': 'application/json;charset=UTF-8',
},
post: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
},
},
withCredentials: true,
timeout: 5000,
},
isShowLog: process.env.NODE_ENV !== 'production', // 로그 출력 여부
isLogFullResponse: false, // response 로그에 전체 항목 표시 여부
isThrowsOnError: true, // response 오류 발생시 throw 할 것인지 여부
// request config에서 baseURL 및 url의 key에 해당되는 value값으로 치환한다.
// (로컬서버에서 프록시 사용시 코드상의 url을 배포단계별로 조작하지 않아도 되게하기 위함)
resolveRequestURL: process.env.NODE_ENV !== 'production' ? undefined : {
'/api': 'https://api.wemakeprice.com',
},
// callback functions
onRequest (config, currReqs) {
console.log(config, currReqs);
// 만약 config 변경이 있다면 리턴하여 반영, 그렇지 않으면 리턴 불필요.
// return config;
},
onResponse (response, currReqs) {
console.log(response, currReqs);
// onRequest와 마찬가지로 response 변경시 리턴.
// return response;
},
onRequestError (error, currReqs) { console.log(error, currReqs); },
onResponseError (error, currReqs) { console.log(error, currReqs); },
onInvalidate (which, error) {
// response 오류처리만 이곳에서 한다.
// request 정보는 error.request에서, response 정보는 error.response에서 확인 가능.
if (which === 'request') {
console.error(`Request error: ${error}`);
} else {
console.error(`Response error: ${error}`);
}
},
}
axiosDefaultConfig(axiosConfig);
```
## Change Log
해당 프로젝트의 [CHANGELOG.md](CHANGELOG.md) 파일 참조.
## License
해당 프로젝트의 [LICENSE](LICENSE) 파일 참조.