💽 Hyunxios: 데이터 패치

소개

fetch밖에 사용하지 못하는 상황에 현재 우리 서비스는 선착순 이벤트를 운영중인데, fetch에 없던 timeout을 추가하고 HTTP method(get, post, patch 등)를 한번더 감싸 추상화하였다.

주안점

1. 아무래도 선착순 이벤트를 운영하는 웹에선 timeout을 쉽게 사용할 수 있는 Restful API 추상화 모듈이 필요했다. 그래서 Hyunxios를 만들게 되었다.
2. 큰 주안점없이 timeout을 동방한 네트워크 추상화 모듈이 필요했다.

hyunxios 구조

hyunxios

async get<T>(url: string): Promise<T> {
  const headers = new Headers();
  headers.append("Content-Type", "application/json");
  try {
	const response = await this.fetch(`${this.baseUrl}${url}`, {
	  method: "GET",
	  credentials: "include",
	  headers: headers,
	  redirect: "follow",
  });
  if (!response.ok) {
	throw new Error("request failed.");
  }
  const data = (await response.json()) as T;
  return data;
  } catch {
    throw new Error("parsing failed.");
  }
}

평범한 추상화 함수이다.

async fetch(
  url: string,
  options: object | null = null,
  limitTime: number = 60000
): Promise<Response> {
  const controller = new AbortController();
  const { signal } = controller;
  const fetchPromise = fetch(url, { ...options, signal }).then(
    (response) => ({ type: "success", data: response })
  );
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      controller.abort();
	  reject({ type: "error", data: "Request timed out" });
    }, limitTime);
  });
  let result: Response = new Response();
  try {
    const raceResult = (await Promise.race([
	  fetchPromise, 
	  timeoutPromise,
	])) as { type: string; data: unknown };
	console.log(raceResult.type);
	if (raceResult.type === "error") throw new Error("Request timeout");
	result = raceResult.data as Response;
  } catch (error) {
	console.log(`fetch error -> ${error}`);
  }
  return result;
}

timeout을 추가하여 Fetch API한번 wrapping했다.

추후 수정사항

1. react query 와 같이 polling 타임을 설정하고 자체적으로 처리하는 로직을 추가할 수 있어야할 것 같다.
2. 인스턴스를 전역적으로 생성하지 않고 custom hook을 통해 전달하는 방식이 조금 더 리액트스러운 것 같다.