В этом блоге я покажу вам практические шаги по отмене запроса на выборку с помощью JavaScript, уделив особое внимание API AbortController. К концу вы будете иметь четкое представление о том, как сделать ваши веб-приложения более отзывчивыми и экономичными.

Почему вам нужно отменить запрос на получение?

Отмена запросов на получение имеет решающее значение в сценариях, где:

• Пользовательский опыт: Когда пользователи уходят со страницы, им не нужно продолжать получать данные для этой страницы.

• Поисковая оптимизация: В функциях поиска, где каждое нажатие клавиши запускает запрос, более эффективно отменить предыдущий запрос перед отправкой нового.

• Сценарии тайм-аута: В случае сетевых задержек или длительных запросов вы можете установить тайм-аут и отменить запрос, если он превышает определенную продолжительность.

Понимание AbortController

API AbortController предоставляет элегантный способ отмены запросов на выборку. Он работает путем создания экземпляра 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);
        }
    });