# Axios Libs
![npm](https://img.shields.io/npm/v/@newbiz/axios-libs)
![node](https://img.shields.io/node/v/@newbiz/axios-libs)
![types](https://img.shields.io/npm/types/@newbiz/axios-libs)
![downloads](https://img.shields.io/npm/dw/@newbiz/axios-libs)
![license](https://img.shields.io/npm/l/@newbiz/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) 파일 참조.