JavaScript AbortController: Освоение отмены асинхронных операций

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

Понимание необходимости отмены

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

Навигация пользователя: Пользователь инициирует поисковый запрос, запуская запрос к API. Если он быстро переходит на другую страницу до завершения запроса, исходный запрос становится неактуальным и должен быть отменен, чтобы избежать ненужного сетевого трафика и потенциальных побочных эффектов.
Управление таймаутами: Вы устанавливаете таймаут для асинхронной операции. Если операция завершается до истечения таймаута, вы должны отменить таймаут, чтобы предотвратить выполнение избыточного кода.
Отключение компонента: В front-end фреймворках, таких как React или Vue.js, компоненты часто делают асинхронные запросы. Когда компонент отключается, любые текущие запросы, связанные с этим компонентом, должны быть отменены, чтобы избежать утечек памяти и ошибок, вызванных обновлением отключенных компонентов.
Ограничения ресурсов: В средах с ограниченными ресурсами (например, мобильные устройства, встроенные системы) отмена ненужных операций может освободить ценные ресурсы и повысить производительность. Например, отмена загрузки большого изображения, если пользователь прокручивает страницу мимо этого раздела.

Введение в AbortController и AbortSignal

Интерфейс AbortController разработан для решения проблемы отмены асинхронных операций. Он состоит из двух основных компонентов:

AbortController: Этот объект управляет сигналом отмены. У него есть один метод, abort(), который используется для отправки сигнала запроса на отмену.
AbortSignal: Этот объект представляет сигнал, что операция должна быть прервана. Он связан с AbortController и передается асинхронной операции, которую необходимо отменить.

Основное использование: отмена запросов Fetch

Начнем с простого примера отмены запроса fetch:


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

fetch('https://api.example.com/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// To cancel the fetch request:
controller.abort();

Пояснение:

Мы создаем экземпляр AbortController.
Мы получаем связанный AbortSignal от controller.
Мы передаем signal параметрам fetch.
Если нам нужно отменить запрос, мы вызываем controller.abort().
В блоке .catch() мы проверяем, является ли ошибка AbortError. Если это так, мы знаем, что запрос был отменен.

Обработка AbortError

Когда вызывается controller.abort(), запрос fetch будет отклонен с AbortError. Крайне важно правильно обрабатывать эту ошибку в вашем коде. Невыполнение этого может привести к необработанным отклонениям промисов и неожиданному поведению.

Вот более надежный пример с обработкой ошибок:


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

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', { signal });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Data:', data);
    return data;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
      return null; // Or throw the error to be handled further up
    } else {
      console.error('Fetch error:', error);
      throw error; // Re-throw the error to be handled further up
    }
  }
}

fetchData();

// To cancel the fetch request:
controller.abort();

Рекомендации по обработке AbortError:

Проверьте имя ошибки: Всегда проверяйте, если error.name === 'AbortError', чтобы убедиться, что вы обрабатываете правильный тип ошибки.
Верните значение по умолчанию или повторно выбросьте: В зависимости от логики вашего приложения, вы можете вернуть значение по умолчанию (например, null) или повторно выбросить ошибку для обработки в дальнейшем в стеке вызовов.
Очистите ресурсы: Если асинхронная операция выделила какие-либо ресурсы (например, таймеры, обработчики событий), очистите их в обработчике AbortError.

Отмена таймеров с помощью AbortSignal

AbortSignal также можно использовать для отмены таймеров, созданных с помощью setTimeout или setInterval. Это требует немного больше ручной работы, так как встроенные функции таймера напрямую не поддерживают AbortSignal. Вам нужно создать пользовательскую функцию, которая прослушивает сигнал отмены и очищает таймер при его срабатывании.


function cancellableTimeout(callback, delay, signal) {
  let timeoutId;

  const timeoutPromise = new Promise((resolve, reject) => {
    timeoutId = setTimeout(() => {
      resolve(callback());
    }, delay);

    signal.addEventListener('abort', () => {
      clearTimeout(timeoutId);
      reject(new Error('Timeout Aborted'));
    });
  });

  return timeoutPromise;
}

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


cancellableTimeout(() => {
  console.log('Timeout executed');
}, 2000, signal)
.then(() => console.log("Timeout finished successfully"))
.catch(err => console.log(err));

// To cancel the timeout:
controller.abort();

Пояснение:

Функция cancellableTimeout принимает обратный вызов, задержку и AbortSignal в качестве аргументов.
Она устанавливает setTimeout и сохраняет идентификатор таймера.
Она добавляет прослушиватель событий к AbortSignal, который прослушивает событие abort.
Когда событие abort срабатывает, прослушиватель событий очищает таймер и отклоняет промис.

Отмена обработчиков событий

Аналогично таймерам, вы можете использовать AbortSignal для отмены обработчиков событий. Это особенно полезно, когда вы хотите удалить обработчики событий, связанные с компонентом, который отключается.


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

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
}, { signal });

// To cancel the event listener:
controller.abort();

Пояснение:

Мы передаем signal в качестве опции методу addEventListener.
Когда вызывается controller.abort(), обработчик событий будет автоматически удален.

AbortController в компонентах React

В React вы можете использовать AbortController для отмены асинхронных операций, когда компонент отключается. Это необходимо для предотвращения утечек памяти и ошибок, вызванных обновлением отключенных компонентов. Вот пример использования хука useEffect:


import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data', { signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = await response.json();
        setData(data);
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Fetch error:', error);
        }
      }
    }

    fetchData();

    return () => {
      controller.abort(); // Cancel the fetch request when the component unmounts
    };
  }, []); // Empty dependency array ensures this effect runs only once on mount

  return (
    
      {data ? (
        Data: {JSON.stringify(data)}
      ) : (
        Loading...
      )}
    
  );
}

export default MyComponent;

Пояснение:

Мы создаем AbortController внутри хука useEffect.
Мы передаем signal запросу fetch.
Мы возвращаем функцию очистки из хука useEffect. Эта функция будет вызвана, когда компонент отключается.
Внутри функции очистки мы вызываем controller.abort(), чтобы отменить запрос fetch.

Расширенные варианты использования

Цепочка AbortSignals

Иногда вам может потребоваться связать несколько AbortSignal вместе. Например, у вас может быть родительский компонент, которому необходимо отменить операции в его дочерних компонентах. Вы можете достичь этого, создав новый AbortController и передав его сигнал как родительскому, так и дочерним компонентам.

Использование AbortController с сторонними библиотеками

Если вы используете стороннюю библиотеку, которая напрямую не поддерживает AbortSignal, вам может потребоваться адаптировать свой код для работы с механизмом отмены библиотеки. Это может включать в себя заключение асинхронных функций библиотеки в ваши собственные функции, которые обрабатывают AbortSignal.

Преимущества использования AbortController

Повышенная производительность: Отмена ненужных операций может снизить сетевой трафик, использование ЦП и потребление памяти, что приводит к повышению производительности, особенно на устройствах с ограниченными ресурсами.
Более чистый код: AbortController предоставляет стандартизированный и элегантный способ управления отменой, делая ваш код более читаемым и удобным в обслуживании.
Предотвращение утечек памяти: Отмена асинхронных операций, связанных с отключенными компонентами, предотвращает утечки памяти и ошибки, вызванные обновлением отключенных компонентов.
Улучшенный пользовательский опыт: Отмена неактуальных запросов может улучшить взаимодействие с пользователем, предотвращая отображение устаревшей информации и уменьшая воспринимаемую задержку.

Совместимость с браузерами

AbortController широко поддерживается в современных браузерах, включая Chrome, Firefox, Safari и Edge. Вы можете проверить таблицу совместимости в MDN Web Docs для получения последней информации.

Polyfills

Для более старых браузеров, которые изначально не поддерживают AbortController, вы можете использовать polyfill. Polyfill — это часть кода, которая предоставляет функциональность новой функции в старых браузерах. В Интернете доступно несколько polyfills AbortController.

Заключение

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

MLOG

JavaScript AbortController: Освоение отмены асинхронных операций

Понимание необходимости отмены

Введение в AbortController и AbortSignal

Основное использование: отмена запросов Fetch

Обработка AbortError

Отмена таймеров с помощью AbortSignal

Отмена обработчиков событий

AbortController в компонентах React

Расширенные варианты использования

Цепочка AbortSignals

Использование AbortController с сторонними библиотеками

Преимущества использования AbortController

Совместимость с браузерами

Polyfills

Заключение

Дополнительное чтение