Как отменить веб-запрос, используя AbortController в JavaScript?

AbortController — это встроенный в JavaScript интерфейс, который позволяет отменять веб-запросы, осуществляемые через fetch. Это может быть особенно полезно в ситуациях, когда вы хотите избежать ненужных запросов, например, когда пользователь покидает страницу или если запрос занимает слишком много времени.

Основы использования AbortController

Для начала, давайте создадим базовый пример, чтобы продемонстрировать, как использовать AbortController для отмены HTTP-запроса.

Шаги использования AbortController:

Пример кода

Вот пример, в котором мы отправим запрос на получение данных с использованием fetch, и мы отменим его через 2 секунды.

// Создаем экземпляр AbortController
const controller = new AbortController();
const signal = controller.signal;

// Функция для выполнения запроса
async function fetchData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', { signal });
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        if (error.name === 'AbortError') {
            console.log('Запрос отменен');
        } else {
            console.error('Произошла ошибка:', error);
        }
    }
}

// Запустим функцию fetchData
fetchData();

// После 2 секунд отменим запрос
setTimeout(() => {
    controller.abort();
}, 2000);

Как это работает

• Мы создаем экземпляр AbortController и извлекаем его signal.
• Передаем signal в fetch, чтобы связать его с запросом.
• Если метод abort() вызывается, выбрасывается исключение AbortError, которое мы можем обрабатывать в блоке catch.

Применение

Использование AbortController особенно полезно в ситуациях, где важно избегать лишних запросов, например:

• В SPA (одностраничных приложениях), когда компонент может быть размонтирован до завершения запроса.
• При реализации поиска с автозаполнением, когда нужно отменить предыдущие запросы при вводе нового текста пользователем.

Заключение

AbortController — это мощный инструмент для управления запросами в JavaScript. Он помогает оптимизировать работу с сетью и улучшает пользовательский опыт, предотвращая ненужные загрузки данных. Надеюсь, этот пример поможет вам лучше понять, как использовать AbortController в ваших проектах!