axios interceptor로 시간에 따른 요청 처리하기

스팀 게임 추천 웹 사이트 서비스를 구현하는 중, 검색하는 단어마다 요청이 보내지는 것을 좀 더 최적화 할 수 없을까? 라는 고민에서 axios interceptor를 사용하게 되었다.
포스팅을 하게 된 이유는 대부분 우리가 사용하는 검색창은 빠르게 단어를 치면 완성 된 단어만 요청으로 들어가는 기능을 다 가지고 있는 것 같은데 그걸 구현한 코드가 마땅히 보이지 않는거 같아 포스팅 하게 되었다.

위와 같이 검색어를 입력할 때 마다 요청을 보내는 것을 확인 할 수 있다.

이를 해결 하기 위해 axios interceptor를 활용하여 0.5초 이내에 요청이 들어 오게 된다면 이전 요청을 취소하도록 취소토큰을 보내는 형식의 코드를 작성하였다.

import axios, { AxiosRequestConfig, AxiosInstance, AxiosRequestHeaders } from "axios";

interface InternalAxiosRequestConfig<T = any> extends AxiosRequestConfig {
  headers: AxiosRequestHeaders;
}

export const request: AxiosInstance = axios.create({
  baseURL: "http://j8d107.p.ssafy.io:32001",
});


const delay = 500; // 0.5초
let cancel: (() => void) | undefined;


request.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    // 이전 요청 취소
    if (cancel) {
      cancel();
    }

    // 새로운 요청 취소 설정
    config.cancelToken = new axios.CancelToken((c) => {
      cancel = c;
    });

    // 요청 지연
    return new Promise<InternalAxiosRequestConfig>((resolve) =>
      setTimeout(() => resolve(config), delay)
    );
  },
  (error) => {
    return Promise.reject(error);
  }
);

request.interceptors.response.use(
  (response) => {
    // 응답이 성공하면, 취소 토큰 초기화
    cancel = undefined;
    return response;
  },
  (error) => {
    // 에러가 발생하면, 취소 토큰 초기화
    cancel = undefined;
    return Promise.reject(error);
  }
);

이 후 이러한 과정이 포함 된 axios를 사용하기 위해

import {request as axios} from "./request"

// GET

export const getSearchList = async (param: {}) => {
  try {
    const { data } = await axios.get("convenience/search", { params: param });
    if (data.flag) {
        // console.log(data)
      return data.data.content;
    } else return false;
  } catch (error) {
    // console.log(error);
  }
};

import로 가져와 사용 해 주었다.

위 gif 다음과 같은 코드를 적용 한 후의 모습이다.
이전에 비해 요청을 적게 보내게 된 결과를 확인 할 수 있다.