[typescript] 타입스크립트와 REST API 호출 시 요청 취소 방법

12 Dec 2023

typescript

웹 애플리케이션에서 REST API를 호출할 때, 요청을 취소하는 기능은 중요합니다. 특히, 페이지를 이동하거나 다른 데이터를 불러오는 경우 이전의 API 요청은 취소되어야 합니다. 이는 불필요한 네트워크 트래픽을 줄이고, 응답을 받지 않은 요청으로 인한 리소스 낭비를 방지합니다.

Axios를 사용한 REST API 호출

가장 일반적으로 사용되는 방법은 Axios와 같은 HTTP 클라이언트 라이브러리를 사용하는 것입니다. Axios를 사용하여 요청을 보내고, 이 요청을 취소하는 방법을 알아보겠습니다. 먼저, Axios를 설치하고 import 해야 합니다.

import axios, { CancelToken } from 'axios';

Axios 요청 취소

Axios는 요청을 취소하기 위한 CancelToken을 제공합니다. 취소 토큰을 이용하여 요청을 보낼 때 해당 토큰을 설정하고, 필요할 때 이 토큰을 사용하여 요청을 취소할 수 있습니다.

const source = axios.CancelToken.source();

const request = axios.get('/api/data', { cancelToken: source.token });

// 요청을 취소하는 예시
source.cancel('Operation canceled by the user.');

React에서 Axios 요청 취소

React 컴포넌트에서 API 호출을 처리하고 있는 경우, 컴포넌트가 언마운트될 때 API 요청을 취소해야 합니다. 이때 axios 요청을 추적하기 위해 Ref 객체를 사용합니다.

import React, { useEffect, useRef } from 'react';

const MyComponent: React.FC = () => {
  const cancelToken = useRef(axios.CancelToken.source());
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data', { cancelToken: cancelToken.current.token });
        console.log(response.data);
      } catch (error) {
        if (axios.isCancel(error)) {
          console.log('Request canceled', error.message);
        } else {
          console.log('Error', error.message);
        }
      }
    };

    fetchData();

    return () => {
      cancelToken.current.cancel('Component unmounted.');
    };
  }, []);

  return (
    // 컴포넌트 렌더링
  );
};

export default MyComponent;

cancelToken을 useRef를 통해 관리하여 컴포넌트가 언마운트 될 때 cancel 메서드를 호출하여 요청을 취소합니다.

요약

이러한 방식으로 Axios를 사용하여 REST API 요청을 보낼 때 요청을 취소할 수 있습니다. 이는 애플리케이션의 성능을 향상시키고, 불필요한 네트워크 트래픽을 방지하는 데 도움이 됩니다.

참고문헌: Axios 공식 문서

더 많은 정보는 여기에서 확인할 수 있습니다.