[typescript] 비동기 작업에 대한 취소 기능 구현 방법

14 Dec 2023

typescript

비동기 작업을 수행하는 도중에 종종 사용자 요청이 취소될 수 있습니다. 이러한 상황에서 비동기 작업을 취소하는 방법은 중요합니다. TypeScript를 사용하여 비동기 작업에 대한 취소 기능을 구현하는 방법을 살펴보겠습니다.

Promise 및 Axios를 이용한 비동기 작업

먼저, Promise와 Axios를 사용하여 비동기 작업을 수행하는 기본적인 방법을 살펴보겠습니다.

import axios, { CancelToken } from 'axios';

const source = axios.CancelToken.source();

const fetchData = (cancelToken: CancelToken) => {
  return axios.get('https://api.example.com/data', { cancelToken });
};

fetchData(source.token)
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.log('Error', error.message);
    }
  });

// 작업 취소
source.cancel('Request canceled by the user.');

위 예제는 Axios를 사용하여 데이터를 가져오는 비동기 작업을 수행하고, 작업을 취소하는 방법을 보여줍니다.

AbortController를 이용한 비동기 작업 취소

또 다른 방법으로는 AbortController를 사용하여 비동기 작업을 취소하는 방법이 있습니다.

const controller = new AbortController();
const signal = controller.signal;

const fetchData = () => {
  return fetch('https://api.example.com/data', { signal });
};

fetchData()
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('Request canceled by the user');
    } else {
      console.error('Error', error);
    }
  });

// 작업 취소
controller.abort();

위 예제는 Fetch API와 AbortController를 사용하여 비동기 작업을 수행하고, 작업을 취소하는 방법을 보여줍니다.

이제, TypeScript를 사용하여 비동기 작업에 대한 취소 기능을 구현하는 방법을 살펴보았습니다. 작업을 취소하는 방법은 비동기 작업을 보다 효율적으로 관리하는데 중요한 요소이므로, 앞으로의 프로젝트에서 이를 유용하게 활용해보시기 바랍니다.

Promise 및 Axios를 이용한 비동기 작업

AbortController를 이용한 비동기 작업 취소

참고 자료