Axios Libs

신사업개발실 서비스/어드민 프론트엔드 Axios 래핑 라이브러리.

This project was generated by Vessel. For a simple and quick reference, click here.

About

Axios 라이브러리를 래핑한 RESTful API 처리 라이브러리.

Installation

해당 모듈을 사용 할 프로젝트에서는 아래와 같이 의존성 모듈로 설치한다.

$ npm install --save @newbiz/axios-libs
or
$ yarn add @newbiz/axios-libs

Usage

최초 랜더링 되는 앱에 아래와 같이 axiosDefaultConfig를 이용하여 설정 부분을 추가해주면 된다.

Vue.js example

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하여 사용한다.

import { axios } from '@newbiz/axios-libs'

Configuration

axiosDefaultConfig() 메소드는 이미 오버라이드 된 axios 기본 설정을 사용자에 맞게 오버라이드 시켜줄 수 있다. interface 선언과 아래 샘플을 참고하면 된다.

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 파일 참조.

License

해당 프로젝트의 LICENSE 파일 참조.