[Vue3, TypeScript] api.interceptors.request.use 요청 인터셉터 및 api.interceptors.response.use 응답 인터셉터에서 Promise.resolve()로 처리하는 방법

모든 페이지에서 다 처리하려고 보니, 코드 중복도 발생하고 추후 유지보수에 최악이라… 요청 인터셉터와 응답인터셉터에서 처리하는 방식으로 구현하였다. Promise.resolve()를 이용하여 정상적인 응답으로 리턴 보내면 api 호출하는 쪽에서 alert으로 보여줄 수 있다. 응답 인터셉터에서 Promise.reject(error);를 사용하면 안되는 구조이다.

const USE_ONLY_DELETE_PATHS = [
  '/api/v1/test/insert,
  '/api/v1/test/update',
  '/api/v1/teset/excelUpload',
];

api.interceptors.request.use 에서 아래와 같이 처리

    if(localStorage.getItem(Storage.IsOverDate) === 'Y') {
      const isNonAllowed = USE_ONLY_DELETE_PATHS.some((path) =>
        url.startsWith(path),
      );

      if (isNonAllowed) {
        return Promise.reject({
          code: 'NON_AUTH',
          message: '건수를 초과하였습니다.\r\n사용자 삭제 후 다시 로그인해줘',
          config,
          __IS_SESSION_EXPIRED__: false,
        });
      }
    }

응답 인터센터 api.interceptors.response.use에서 다음과 같이 받을 수 있다. 에러를 reject하지 않고 그냥 swallow(먹어버리기) 하면 된다. mock 데이터 = 호출부에 돌려줄 “가짜 정상 응답 데이터”를 의미한다. 보통은 { data: [] }, { data: null }, 혹은 API 형식에 맞춘 더미 값이다.

    if (error.code === 'NON_AUTH') {
      // return Promise.resolve(null); // 혹은 원하는 mock 데이터
      // error를 가짜 응답으로 감싸서 리턴
      return Promise.resolve({
        data: {
          result: 'Failed',
          message: '카드 건수를 초과하였습니다.\r\n카드 사용자 삭제 후 다시 로그인해줘',
        },
        status: 200,
        statusText: 'OK',
        headers: {},
        config: error.config,
      });
    } else if (error.code === 'ERR_NETWORK' || !error.response) {
      const uiStore = useUiStore();
      uiStore.showWarnPopup('네트워크 연결이 불안정합니다. 인터넷 연결을 확인한 후 다시 시도해 주세요.');
      return Promise.reject(error);
    }

호출하는 api에서는

const { data } = await api.post('/api/v1/test/insert', payload);

      if (data.code === 'NON_AUTH') {
        returnParams.value = data;
        return;
      }

관련 오브젝트들

export interface ReturnParamsType {
  result: boolean;
  message: string;
}

const initialReturnParams: ReturnParamsType = {} as ReturnParamsType;
const returnParams = ref({ ...initialReturnParams });