axios classification

자주 사용하는 라이브러리인 axios를 class화한 모듈입니다. :)

⚡ Install

$ npm i axios-classification

🤹‍♂️ How to use

axios-classification를 import 하여 AxiosBase를 가져옵니다. AxiosBase는 Class 객체이기에, 객체 생성을 하여 사용합니다.

Import module

import { AxiosBase } from 'axios-classification';

Create object

const config = {
  baseURL: 'http://example.co.kr',
};

const axiosBase = new AxiosBase(config);

💡 해당 config는 Axios 설정을 기반으로 합니다.

Post / Get / Put / Patch / Delete

메소드들의 매개변수는 모두 동일합니다. 제네릭에서 첫번째 타입은 파라미터 형식, 두번째 타입은 응답받을 형식 입니다.

interface IExampleParam {
  id: number;
  name: string;
}

interface IResponseData {
  status: boolean;
}

const params = {
  id: 1,
  name: 'test',
};

// Post
const { data } = axiosBase.post<IExampleParam, IResponseData>('/path/to', params);

// Get
const { data } = axiosBase.get<IExampleParam, IResponseData>('/path/to', params);

// Put
const { data } = axiosBase.put<IExampleParam, IResponseData>('/path/to', params);

// Patch
const { data } = axiosBase.patch<IExampleParam, IResponseData>('/path/to', params);

// Delete
const { data } = axiosBase.delete<IExampleParam, IResponseData>('/path/to', params);

console.log(data); // { status: true }

만약 넘기는 파라미터, 또는 응답이 없다면, undefined 타입으로 설정해주세요.

interface IResponseData {
  status: boolean;
}

// Get
const { data } = axiosBase.get<undefined, IResponseData>('/path/to');

Setting bearer auth token

만약 헤더에 token을 넣어야한다면 setBearerToken을 사용하세요. 헤더의 Authorization에 Bearer ${token}}을 자동으로 넣어줍니다. :)

axiosBase.setBearerToken('123456789');

/*
{
  header : "Bearer 123456789"
}
*/

Setting header

다른 값을 헤더에 넣어야한다면 아래 함수들을 사용하세요.

• setCommonHeader
• setDeleteHeader
• setGetHeader
• setHeadHeader
• setPatchHeader
• setPostHeader
• setPutHeader

해당 함수들의 파라미터들은 모두 같아요.

axiosBase.setCommonHeader({
  'Content-type': 'application/json',
});

axiosBase.setPostHeader({
  test: 'test',
});

Interceptor

요청하기 전, 또는 응답 전에 인터셉트를 해야한다면 setRequestInterceptor, setResponseInterceptor를 사용하세요. parameter는 두 함수가 동일하게 (callback function, callback function, options) 입니다.

// request interceptor
axiosBase.setRequestInterceptor(
  (config) => {
    // content
    return config;
  },
  (error) => {
    // content
    throw error;
  },
);

// response interceptor
axiosBase.setResponseInterceptor(
  (response) => {
    // content
    return response;
  },
  (error) => {
    // content
    throw error;
  },
);

Extends class

class를 만들고, 상속을 받아 사용할 수 있습니다. 원하는 property를 class 내부에서 사용해야 한다면 아래 방법처럼 사용하세요.

import { AxiosBase } from 'axios-classification';

class Test extends AxiosBase {
  private readonly key = '1234567890';

  getKey() {
    return this.key;
  }
}

export const TestClient = new Test({
  baseURL: 'your url',
});

👀 Example

example를 참고하세요. :)

🎊 Thanks

AxiosBase class에서 제공해야한다고 생각하는 axios의 기능들은 issue 또는 PR 주세요. :)