Отмена запросов

Библиотека Cash предоставляет удобный интерфейс для работы с AJAX-запросами, и одной из важных возможностей является отмена запросов. Управление отменой критически важно при работе с динамическими интерфейсами, где пользователь может инициировать несколько запросов подряд, а устаревшие ответы не должны влиять на состояние приложения.

Методы отмены запросов

Cash использует объект AbortController из стандарта Fetch API для управления отменой. Классическая схема работы включает создание контроллера, передачу его сигнала в запрос и вызов метода abort() при необходимости.

Пример базового использования:

const controller = new AbortController();

cash.ajax({
  url: '/api/data',
  method: 'GET',
  signal: controller.signal
}).then(response => {
  console.log('Данные получены:', response);
}).catch(error => {
  if (error.name === 'AbortError') {
    console.log('Запрос был отменён');
  } else {
    console.error('Ошибка запроса:', error);
  }
});

// Отмена запроса через 2 секунды
setTimeout(() => controller.abort(), 2000);

Ключевые моменты:

  • AbortController.signal передаётся в объект конфигурации запроса.
  • Метод abort() генерирует исключение AbortError.
  • Ошибки других типов обрабатываются отдельно.

Отмена нескольких запросов

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

let currentController = null;

function fetchData(query) {
  if (currentController) {
    currentController.abort(); // Отмена предыдущего запроса
  }
  
  currentController = new AbortController();

  cash.ajax({
    url: `/api/search?q=${query}`,
    method: 'GET',
    signal: currentController.signal
  }).then(data => {
    console.log('Результаты поиска:', data);
  }).catch(error => {
    if (error.name !== 'AbortError') {
      console.error('Ошибка запроса:', error);
    }
  });
}

Преимущества такого подхода:

  • Исключается вероятность использования устаревших данных.
  • Уменьшается нагрузка на сервер при интенсивных запросах.
  • Улучшается пользовательский опыт за счёт более быстрых реакций интерфейса.

Интеграция с Cash-подписками и цепочками промисов

Cash позволяет строить цепочки промисов и выполнять несколько запросов последовательно. Отмена может быть встроена в любую точку цепочки с помощью передачи сигнала контроллера.

const controller = new AbortController();

cash.ajax({ url: '/api/step1', signal: controller.signal })
  .then(response1 => {
    return cash.ajax({ url: `/api/step2/${response1.id}`, signal: controller.signal });
  })
  .then(response2 => {
    console.log('Окончательные данные:', response2);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Цепочка запросов была прервана');
    } else {
      console.error('Ошибка в цепочке:', error);
    }
  });

// Возможность прерывания всей цепочки
controller.abort();

Особенности работы:

  • Сигнал контроллера применяется ко всем запросам, где он передан.
  • При вызове abort() прерываются все активные запросы с этим сигналом.
  • Исключения необходимо обрабатывать на уровне .catch() каждой цепочки.

Практические советы

  1. Создание отдельного контроллера для каждой логической операции Это позволяет изолировать отмену одного набора запросов от других операций в приложении.

  2. Обработка ошибок отмены отдельно Исключение AbortError не следует считать критической ошибкой, оно сигнализирует о нормальном поведении.

  3. Комбинация с дебаунсом Для интерфейсов с вводом текста в реальном времени стоит комбинировать отмену с функцией debounce, чтобы запросы отправлялись не на каждый ввод, а после паузы.

  4. Состояние UI При отмене запроса полезно сбрасывать индикаторы загрузки, чтобы интерфейс не показывал зависшие состояния.

Взаимодействие с другими библиотеками

Cash легко интегрируется с другими библиотеками, использующими Fetch API. Важно передавать один и тот же сигнал AbortController при совместных запросах, чтобы централизованно управлять их отменой. Это особенно актуально для компонентов, где несколько AJAX-запросов зависят друг от друга.

Итоговый подход к отмене запросов

Использование AbortController совместно с Cash обеспечивает:

  • Управляемую отмену одиночных и множественных запросов.
  • Минимизацию гонок данных при параллельных запросах.
  • Чёткую обработку ошибок без разрушения цепочек промисов.
  • Улучшение отзывчивости интерфейсов при динамическом взаимодействии пользователя.
Оглавление