Skip to main content

Installation

API Generator를 사용하기 위해선 instance.ts 파일이 필요합니다.

1. 자동 생성​

pnpm mash-up-web

Instance 파일 생성​

CLI를 실행하면 다음과 같은 메뉴가 나타납니다:

? 명령을 선택해주세요. (Use arrow keys)
  gen:config
❯ gen:api-config
  gen:api
  • **gen:api-config**를 선택하세요.

다음으로 사용할 HTTP 클라이언트 타입을 선택합니다:

? HTTP 클라이언트를 선택해주세요 (Use arrow keys)
❯ fetch
  axios

instance.ts 파일이 생성됩니다.

info

자동생성 경로는 src/config/__generated__/{fetch 또는 axios}/instance.ts 입니다.

2. 수동 생성​

원하는 경로에 instance.ts 파일을 생성합니다.

fetch​

instance.ts
/**
 * 인터셉터 처리를 위한 핸들러 함수
 */
let requestInterceptor: ((config: RequestInit) => RequestInit) | null = null;
let responseInterceptor: ((response: Response) => Response) | null = null;

/**
 * fetch API를 확장한 커스텀 함수
 * 요청/응답 인터셉터 기능 제공
 */
const customFetch = async (
  input: RequestInfo | URL,
  init?: RequestInit
): Promise<Response> => {
  try {
    // 요청 전 인터셉터 적용
    let config = init || {};
    if (requestInterceptor) {
      config = requestInterceptor(config);
    }

    // 실제 fetch 요청 실행
    const response = await fetch(input, config);

    // 응답 후 인터셉터 적용
    if (responseInterceptor) {
      return responseInterceptor(response);
    }

    return response;
  } catch (error) {
    return Promise.reject(error);
  }
};

/**
 * 인터셉터 설정 인터페이스
 */
const interceptors = {
  request: {
    use: (handler: (config: RequestInit) => RequestInit) => {
      requestInterceptor = handler;
    },
  },
  response: {
    use: (handler: (response: Response) => Response) => {
      responseInterceptor = handler;
    },
  },
};

// 요청 인터셉터 설정
interceptors.request.use(config => {
  return {
    ...config,
    headers: {
      ...config.headers,
      // 필요한 헤더 추가
      // 예: "Content-Type": "application/json",
    },
  };
});

// 응답 인터셉터 설정
interceptors.response.use(response => {
  return response;
});

Object.assign(customFetch, { interceptors });

export default customFetch;

axios​

instance.ts
import axios, { AxiosError } from 'axios';

const instance = axios.create({
  // baseURL을 작성해주세요.
  baseURL: '',
});

/**
 * 요청 인터셉터
 */
instance.interceptors.request.use(
  async config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

/**
 * 응답 인터셉터
 */
instance.interceptors.response.use(
  res => {
    return res;
  },
  async (error: AxiosError) => {
    try {
      return Promise.reject(error);
    } catch (e) {
      return Promise.reject(e);
    }
  }
);

export default instance;