[javascript] 비동기 작업의 취소와 중단 방법

14 Dec 2023

javascript

비동기 작업이란 일반적으로 웹 개발에서 사용되는 개념으로, 작업이 백그라운드에서 실행되는 동안에도 사용자가 다른 작업을 계속할 수 있다는 것을 의미합니다. 그러나 때로는 비동기 작업을 중단하거나 취소해야 하는 경우가 있을 수 있습니다. 이런 상황에서는 어떻게 비동기 작업을 취소하고 중단할 수 있는지에 대해 알아보겠습니다.

취소 가능한 프로미스

ES6부터는 Promise 객체를 생성하고 해당 Promise를 활용하여 비동기 작업을 수행할 수 있는데, 이때 취소 가능한 프로미스를 사용하면 비동기 작업을 중간에 중단시킬 수 있습니다. cancellable 라이브러리나 bluebird 같은 라이브러리를 사용하여 취소 가능한 프로미스를 생성할 수 있습니다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
});

const cancellablePromise = cancellable(promise);

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

ES2017부터는 AbortController를 사용하여 비동기 작업을 취소할 수 있습니다. fetch API를 예로 들면, 다음과 같이 AbortController를 사용하여 요청을 중단할 수 있습니다.

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

fetch(url, { signal })
  .then(response => {
    // 작업 수행
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // 작업이 취소된 경우 처리 로직
    } else {
      // 다른 에러 처리 로직
    }
  });

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

작업 진행 여부 확인

비동기 작업을 취소하기 전에 현재 작업이 진행 중인지 확인하는 것이 중요합니다. 작업 상태를 확인하여 작업이 이미 완료되어 취소할 필요가 없는지 확인할 수 있습니다.

결론

비동기 작업의 취소와 중단은 웹 개발에서 중요한 주제입니다. ES6의 Promise부터 ES2017의 AbortController까지 취소 가능한 비동기 작업을 위한 다양한 방법을 제공하고 있으니, 각 상황에 맞게 적절한 방법을 선택하여 사용하면 됩니다. 비동기 작업의 취소와 중단에 대한 이해는 안정적인 웹 어플리케이션을 개발하는 데 도움이 될 것입니다.

더 자세한 내용은 아래 참고 자료를 참고하세요.