이 블로그에서는 AbortController API에 중점을 두고 JavaScript를 사용하여 가져오기 요청을 취소하는 실제 단계를 안내하겠습니다. 결국에는 웹 앱의 반응성을 높이고 리소스 친화적으로 만드는 방법을 명확하게 이해하게 될 것입니다.

가져오기 요청을 취소해야 하는 이유는 무엇입니까?

다음과 같은 상황에서는 가져오기 요청을 취소하는 것이 중요합니다.

• 사용자 경험: 사용자가 페이지에서 다른 곳으로 이동할 때 해당 페이지에 대한 데이터를 계속 가져올 필요가 없습니다.

• 검색 최적화: 각 키 입력이 요청을 트리거하는 검색 기능에서는 새 요청을 보내기 전에 이전 요청을 취소하는 것이 더 효율적입니다.

• 시간 초과 시나리오: 네트워크 지연 또는 장기 실행 요청의 경우 시간 초과를 설정하고 특정 기간을 초과하면 요청을 취소할 수 있습니다.

AbortController 이해

AbortController API는 가져오기 요청을 취소하는 우아한 방법을 제공합니다. 이는 신호가 가져오기 요청에 전달되는 AbortController 인스턴스를 생성하여 작동합니다. 컨트롤러에서 abort() 메서드를 호출하면 요청이 취소됩니다.

가져오기 요청 취소에 대한 단계별 가이드

1. AbortController를 사용한 기본 설정

가장 기본적인 예부터 시작해 보겠습니다. AbortController를 생성하고 가져오기 요청을 취소하는 것입니다.

// Step 1: Create an instance of AbortController
const controller = new AbortController();

// Step 2: Pass the signal to the fetch request
fetch('https://jsonplaceholder.typicode.com/posts', { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log('Data:', data))
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('Fetch request was canceled');
        } else {
            console.error('Fetch error:', err);
        }
    });

// Step 3: Cancel the fetch request
controller.abort();

2. 실제 사용 사례: 사용자 상호 작용에 대한 요청 취소
일반적인 시나리오 중 하나는 사용자 상호 작용에 대한 응답으로 가져오기 요청을 취소하는 것입니다. 예를 들어 검색 기능을 구현할 때 각 키 입력이 새로운 가져오기 요청을 트리거할 수 있습니다. 이전 요청을 취소하면 오래되었거나 관련 없는 데이터가 처리되는 것을 방지할 수 있습니다.

let controller;

function search(query) {
    // Cancel the previous request if it exists
    if (controller) {
        controller.abort();
    }

    // Create a new controller for the new request
    controller = new AbortController();

    // Fetch data with the new controller
    fetch(`https://jsonplaceholder.typicode.com/posts?query=${query}`, { signal: controller.signal })
        .then(response => response.json())
        .then(data => console.log('Search results:', data))
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Previous request canceled');
            } else {
                console.error('Fetch error:', err);
            }
        });
}

// Example usage: simulate user typing
search('React');
search('Vue'); // The request for 'React' is canceled

3. 가져오기 요청에 대한 시간 초과 구현
신뢰할 수 없는 네트워크 상태를 처리할 때는 시간 초과가 필수적입니다. AbortController를 사용하면 가져오기 요청이 너무 오래 걸리는 경우 가져오기 요청을 취소하는 시간 초과 메커니즘을 쉽게 구현할 수 있습니다.

function fetchWithTimeout(url, timeout = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);

    return fetch(url, { signal: controller.signal })
        .then(response => {
            clearTimeout(timeoutId);
            return response.json();
        })
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Fetch request timed out');
            } else {
                console.error('Fetch error:', err);
            }
        });
}

// Example usage
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', 3000)
    .then(data => console.log('Data:', data));

가져오기 요청 취소를 적절하게 처리하기

가져오기 요청을 취소할 때는 요청을 적절하게 처리하는 것이 중요합니다. 여기에는 취소로 인해 발생한 오류와 다른 유형의 오류를 구별하는 작업이 포함됩니다.

fetch(url, { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => {
        if (err.name === 'AbortError') {
            // Handle cancellation specifically
            console.log('Request was canceled');
        } else {
            // Handle other types of errors
            console.error('Request failed', err);
        }
    });