[JS] axios

Axios

Promise기반 HTTP 클라이언트 라이브러리

axios vs fetch

Promise기반으로 사용된다는 것은 동일하지만 아래와같은 axios만의 장점이 존재한다.

장점

1. 간소한 HTTP Request
   데이터 형식을 자동으로 Json형식으로 변환해줌.
2. 추가 기능 제공
   Request, Response시 인터셉트기능 제공
   인스턴스기능 제공
3. 더 많은 에러 정보 제공
4. timeout기능 제공
   서버와의 통신이 비정상적으로 오래걸리면 timeout가능

instance

필요한 axios형식을 미리 만들어둡니다. 이렇게 만들어진 인스턴스 axios를 사용합니다.

• ex

  const httpInstance: AxiosInstance = axios.create({
    baseURL: Config.APP_API_URL,
    withCredentials: true,
    timeout: 60000,
  });
  

Interceptor

then, catch로 처리되기 전에 Request, Response, Error를 가로채며 특정 함수를 실행합니다.

• ex

// Interceptor
const onRequest = (
  config: InternalAxiosRequestConfig,
): InternalAxiosRequestConfig => {
  Logger.debug('onRequest', config.url);
  return config;
};

const onResponse = (response: AxiosResponse): AxiosResponse => {
  Logger.debug('onResponse', response.data);
  return response;
};

const onResponseError = async (
  error: AxiosError | Error,
): Promise<AxiosError> => {
  if (error instanceof AxiosError) {
    Logger.debug('onResponseError Http Body', error.response?.data);
    Logger.debug('onResponseError Http Status', error.response?.status);

    const originalConfig = error.config as InternalAxiosRequestConfig;

    ...
        return httpInstance(originalConfig);
      } catch (error: any) {
        Logger.debug('onResponseError Error', error.response?.data);
        return Promise.reject(error.response?.data);
      }
    }
    return Promise.reject(
      error.response?.data ?? {
        success: false,
        error: {
          status: 9999,
          code: '',
          message: '일시적으로 문제가 발생했어요\n다시 시도해주세요',
        },
      },
    );
  }
  
httpInstance.interceptors.request.use(onRequest);
httpInstance.interceptors.response.use(onResponse, onResponseError);