[javascript] 비동기 데이터 요청에서의 취소 및 중단 처리 방법

11 Dec 2023

javascript

비동기 데이터 요청은 웹 애플리케이션에서 사용자 경험을 향상시키는 데 중요합니다. 그러나 때로는 요청을 취소하거나 중단해야 하는 경우가 있습니다. 이에 대한 방법에 대해 알아봅시다.

1. Promise를 활용한 요청 취소

JavaScript에서는 Promise를 사용하여 비동기 작업을 처리합니다. Promise.race를 사용하여 여러 Promise 중 가장 먼저 완료된 Promise를 처리할 수 있습니다. 이를 활용하여 요청 취소를 구현할 수 있습니다.

예시:

let fetchDataPromise = new Promise((resolve, reject) => {
  // 비동기 데이터 요청
});

let timeoutPromise = new Promise((resolve, reject) => {
  // 시간 초과 Promise
  setTimeout(resolve, 5000, 'Request timed out');
});

Promise.race([fetchDataPromise, timeoutPromise])
  .then((result) => {
    // 요청 완료 처리
  })
  .catch((error) => {
    if (error === 'Request timed out') {
      // 시간 초과 처리
    } else {
      // 기타 오류 처리
    }
  });

2. AbortController를 사용한 요청 취소

AbortController를 사용하면 fetch API와 같은 비동기 요청을 취소할 수 있습니다.

예시:

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

fetch('https://example.com/data', { signal })
  .then(response => {
    // 요청 완료 처리
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // 요청 취소 처리
    } else {
      // 기타 오류 처리
    }
  });

// 요청 취소
controller.abort();

결론

비동기 데이터 요청을 취소하거나 중단하는 방법에 대해 알아보았습니다. Promise.race 및 AbortController를 활용하면 요청을 효과적으로 관리할 수 있습니다. 적절하게 요청을 처리하여 웹 애플리케이션의 성능과 사용자 경험을 향상시키는데 도움이 될 것입니다.

참고 자료:

MDN Web Docs: Using Fetch
MDN Web Docs: Using AbortController