JavaScript AbortController: Опанування патернів скасування запитів

У сучасній веб-розробці асинхронні операції є звичним явищем. Чи то отримання даних з віддаленого сервера, завантаження файлів, чи виконання складних обчислень у фоновому режимі, JavaScript значною мірою покладається на проміси та асинхронні функції. Однак неконтрольовані асинхронні операції можуть призвести до проблем з продуктивністю, марнування ресурсів та неочікуваної поведінки. Саме тут у нагоді стає AbortController. Ця стаття є вичерпним посібником з опанування патернів скасування запитів за допомогою AbortController у JavaScript, що дозволить вам створювати більш надійні та ефективні веб-додатки для глобальної аудиторії.

Що таке AbortController?

AbortController — це вбудований API JavaScript, що дозволяє переривати один або декілька веб-запитів. Він надає спосіб сигналізувати про необхідність скасування операції, запобігаючи зайвому мережевому трафіку та споживанню ресурсів. AbortController працює разом з AbortSignal, який передається асинхронній операції, що має бути скасована. Разом вони пропонують потужний та гнучкий механізм для керування асинхронними завданнями.

Навіщо використовувати AbortController?

Існує кілька сценаріїв, у яких використання AbortController є корисним:

• Покращена продуктивність: Скасування запитів, що виконуються, але більше не потрібні, зменшує мережевий трафік та звільняє ресурси, що призводить до швидших та більш чутливих додатків.
• Запобігання стану гонитви (Race Conditions): Коли кілька запитів ініціюються один за одним, релевантним може бути лише результат останнього. Скасування попередніх запитів запобігає стану гонитви та забезпечує узгодженість даних.
• Покращення користувацького досвіду: У таких сценаріях, як пошук під час введення тексту або динамічне завантаження контенту, скасування застарілих запитів забезпечує плавніший та більш чутливий користувацький досвід.
• Керування ресурсами: Мобільні пристрої та середовища з обмеженими ресурсами виграють від скасування тривалих або непотрібних запитів для економії заряду батареї та пропускної здатності.

Базове використання

Ось базовий приклад, що демонструє, як використовувати AbortController з fetch API:

Приклад 1: Просте скасування 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);
 })
 .catch(error => {
  if (error.name === 'AbortError') {
   console.log('Fetch aborted');
  } else {
   console.error('Fetch error:', error);
  }
 });

// Abort the fetch request after 5 seconds
setTimeout(() => {
 controller.abort();
}, 5000);

            

              
                Copy
              
            
          

Пояснення:

• Створюється новий AbortController.
• Властивість signal екземпляра AbortController передається в опції fetch.
• Функція setTimeout використовується для переривання запиту через 5 секунд шляхом виклику controller.abort().
• Блок catch обробляє AbortError, яка виникає, коли запит переривається.

Просунуті патерни скасування

Окрім базового прикладу, існує кілька просунутих патернів, які можна ефективно використовувати з AbortController.

Патерн 1: Скасування при розмонтуванні компонента (Приклад на React)

У компонентних фреймворках, таких як React, поширеною практикою є ініціювання запитів при монтуванні компонента та їх скасування при розмонтуванні. Це запобігає витокам пам'яті та гарантує, що додаток не продовжуватиме обробляти дані для компонентів, які більше не видимі.

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

function DataComponent() {
 const [data, setData] = useState(null);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);

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

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

  fetchData();

  return () => {
   controller.abort(); // Cleanup function to abort the request
  };
 }, []); // Empty dependency array ensures this runs only on mount/unmount

 if (loading) return 
Loading...
;
 if (error) return 
Error: {error.message}
;

 return (
  

   
Data:
   
{JSON.stringify(data, null, 2)}
  
 );
}

export default DataComponent;

            

              
                Copy
              
            
          

Пояснення:

• Хук useEffect використовується для виконання побічних ефектів (у цьому випадку, отримання даних) при монтуванні компонента.
• AbortController створюється всередині хука useEffect.
• Функція очищення, яку повертає useEffect, викликає controller.abort() при розмонтуванні компонента, гарантуючи скасування будь-яких поточних запитів.
• Порожній масив залежностей ([]) передається в useEffect, вказуючи, що ефект повинен виконатися лише один раз при монтуванні та один раз при розмонтуванні.

Патерн 2: Debouncing та Throttling

Debouncing (усунення брязкоту) та throttling (регулювання) — це техніки, що використовуються для обмеження частоти виконання функції. Вони зазвичай застосовуються в таких сценаріях, як пошук під час введення тексту або зміна розміру вікна, де часті події можуть викликати дорогі операції. AbortController можна використовувати разом з debouncing та throttling для скасування попередніх запитів при виникненні нової події.

Приклад: Пошук з Debounce та AbortController

            function debouncedSearch(query, delay = 300) {
 let controller = null; // Keep the controller in the scope
 return function() {
    if (controller) {
      controller.abort(); // Abort previous request
    }

    controller = new AbortController(); // Create a new AbortController
    const signal = controller.signal;
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        fetch(`https://api.example.com/search?q=${query}`, { signal })
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json(); 
          })
          .then(data => {
            resolve(data);
          })
          .catch(error => {
              if (error.name === 'AbortError') {
                console.log('Search Aborted for: ' + query);
              } else {
                reject(error);
              }
          });
      }, delay);
    });
  };
}

// Usage Example:
const search = debouncedSearch('Example Query');
search().then(results => console.log(results)).catch(error => console.error(error)); //Initial search
search().then(results => console.log(results)).catch(error => console.error(error)); //Another search; aborts the previous
search().then(results => console.log(results)).catch(error => console.error(error)); //...and another

            

              
                Copy
              
            
          

Пояснення:

• Функція debouncedSearch повертає debounced-версію функції пошуку.
• Кожного разу, коли викликається debounced-функція, вона спочатку перериває будь-які попередні запити за допомогою controller.abort().
• Потім створюється новий AbortController, який використовується для ініціювання нового запиту.
• Функція setTimeout вводить затримку перед виконанням запиту, гарантуючи, що пошук виконується лише після того, як користувач припинив вводити текст на певний період часу.

Патерн 3: Комбінування кількох AbortSignal

У деяких випадках вам може знадобитися перервати запит на основі кількох умов. Наприклад, ви можете захотіти перервати запит, якщо закінчився час очікування або якщо користувач покинув сторінку. Цього можна досягти, об'єднавши кілька екземплярів AbortSignal в один сигнал.

Цей патерн не підтримується нативно, і зазвичай вам доведеться реалізовувати власну логіку комбінування.

Патерн 4: Тайм-аути та крайні терміни

Встановлення тайм-аутів для запитів є критично важливим, щоб запобігти їх нескінченному зависанню. AbortController можна використовувати для легкої реалізації тайм-аутів.

            async function fetchDataWithTimeout(url, timeout) {
 const controller = new AbortController();
 const signal = controller.signal;

 const timeoutId = setTimeout(() => {
  controller.abort();
 }, timeout);

 try {
  const response = await fetch(url, { signal });
  clearTimeout(timeoutId); // Clear timeout if request completes successfully

  if (!response.ok) {
   throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.json();
 } catch (error) {
  clearTimeout(timeoutId); // Clear timeout in case of any error
  throw error;
 }
}

// Usage:
fetchDataWithTimeout('https://api.example.com/data', 3000) // 3 seconds timeout
 .then(data => console.log(data))
 .catch(error => console.error(error));

            

              
                Copy
              
            
          

Пояснення:

• Функція fetchDataWithTimeout приймає URL та значення тайм-ауту як аргументи.
• Функція setTimeout використовується для переривання запиту після вказаного тайм-ауту.
• Функція clearTimeout викликається як у блоці try, так і в блоці catch, щоб гарантувати, що тайм-аут буде скасовано, якщо запит завершиться успішно або виникне помилка.

Глобальні аспекти та найкращі практики

При роботі з AbortController у глобальному контексті важливо враховувати наступне:

• Локалізація: Повідомлення про помилки та елементи інтерфейсу, пов'язані зі скасуванням запиту, повинні бути локалізовані, щоб бути доступними для користувачів у різних регіонах.
• Мережеві умови: Мережеві умови можуть значно відрізнятися в різних географічних місцях. Налаштовуйте значення тайм-аутів та стратегії скасування залежно від очікуваної затримки мережі та пропускної здатності в різних регіонах.
• Серверні аспекти: Переконайтеся, що ваші серверні API-ендпоінти коректно обробляють скасовані запити. Наприклад, ви можете реалізувати механізм зупинки обробки запиту, якщо клієнт його перервав.
• Доступність: Надавайте чіткий та інформативний зворотний зв'язок користувачам, коли запит скасовано. Це може допомогти користувачам зрозуміти, чому запит було скасовано, і вжити відповідних заходів.
• Мобільні пристрої проти настільних: Користувачі мобільних пристроїв можуть мати більш нестабільні з'єднання, тому переконайтеся, що ваші тайм-аути та обробка помилок надійні для мобільних пристроїв.
• Різні браузери: Розгляньте можливість тестування в різних браузерах та їх версіях, щоб перевірити наявність будь-яких проблем сумісності, пов'язаних з AbortController API.

Обробка помилок

Правильна обробка помилок є надзвичайно важливою при використанні AbortController. Завжди перевіряйте наявність AbortError та обробляйте її відповідним чином.

            try {
 // ... fetch code ...
} catch (error) {
 if (error.name === 'AbortError') {
  console.log('Request was aborted');
  // Perform any necessary cleanup or UI updates
 } else {
  console.error('An error occurred:', error);
  // Handle other errors
 }
}

            

              
                Copy
              
            
          

Висновок

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

Використовуючи описані вище патерни, розробники можуть впевнено керувати асинхронними операціями, оптимізувати використання ресурсів та надавати винятковий користувацький досвід у різноманітних середовищах та для глобальної аудиторії.

Цей вичерпний посібник повинен стати міцною основою для опанування патернів скасування запитів за допомогою AbortController у JavaScript. Щасливого кодування!