JavaScript AbortController: Opanowanie wzorców anulowania żądań

W nowoczesnym tworzeniu stron internetowych operacje asynchroniczne są powszechne. Niezależnie od tego, czy chodzi o pobieranie danych z serwera zdalnego, przesyłanie plików, czy wykonywanie złożonych obliczeń w tle, JavaScript w dużym stopniu polega na obietnicach (promises) i funkcjach asynchronicznych. Jednak niekontrolowane operacje asynchroniczne mogą prowadzić do problemów z wydajnością, marnowania zasobów i nieoczekiwanego zachowania. W tym miejscu z pomocą przychodzi AbortController. Ten artykuł stanowi kompleksowy przewodnik po opanowaniu wzorców anulowania żądań przy użyciu AbortController w JavaScript, umożliwiając tworzenie bardziej solidnych i wydajnych aplikacji internetowych dla globalnej publiczności.

Czym jest AbortController?

AbortController to wbudowane API JavaScript, które pozwala na przerwanie jednego lub więcej żądań internetowych. Zapewnia sposób na zasygnalizowanie, że operacja powinna zostać anulowana, zapobiegając niepotrzebnemu ruchowi sieciowemu i zużyciu zasobów. AbortController działa w połączeniu z AbortSignal, który jest przekazywany do operacji asynchronicznej, która ma zostać anulowana. Razem oferują potężny i elastyczny mechanizm do zarządzania zadaniami asynchronicznymi.

Dlaczego warto używać AbortController?

Istnieje kilka scenariuszy, w których użycie AbortController przynosi korzyści:

• Poprawa wydajności: Anulowanie trwających żądań, które nie są już potrzebne, zmniejsza ruch sieciowy i zwalnia zasoby, co prowadzi do szybszych i bardziej responsywnych aplikacji.
• Zapobieganie sytuacjom wyścigu (race conditions): Gdy wiele żądań jest inicjowanych w krótkich odstępach czasu, tylko wynik najnowszego żądania może być istotny. Anulowanie poprzednich żądań zapobiega sytuacjom wyścigu i zapewnia spójność danych.
• Poprawa doświadczenia użytkownika: W scenariuszach takich jak wyszukiwanie w trakcie pisania lub dynamiczne ładowanie treści, anulowanie nieaktualnych żądań zapewnia płynniejsze i bardziej responsywne doświadczenie użytkownika.
• Zarządzanie zasobami: Urządzenia mobilne i środowiska o ograniczonych zasobach czerpią korzyści z anulowania długotrwałych lub niepotrzebnych żądań w celu oszczędzania baterii i przepustowości.

Podstawowe użycie

Oto podstawowy przykład demonstrujący, jak używać AbortController z fetch API:

Przykład 1: Proste anulowanie żądania 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
              
            
          

Wyjaśnienie:

• Tworzony jest nowy AbortController.
• Właściwość signal obiektu AbortController jest przekazywana do opcji fetch.
• Funkcja setTimeout jest używana do przerwania żądania po 5 sekundach poprzez wywołanie controller.abort().
• Blok catch obsługuje błąd AbortError, który jest rzucany, gdy żądanie jest przerywane.

Zaawansowane wzorce anulowania

Poza podstawowym przykładem, istnieje kilka zaawansowanych wzorców, które można wykorzystać do efektywnego użycia AbortController.

Wzorzec 1: Anulowanie przy odmontowywaniu komponentu (przykład w React)

W frameworkach opartych na komponentach, takich jak React, często inicjuje się żądania, gdy komponent jest montowany, i anuluje się je, gdy komponent jest odmontowywany. Zapobiega to wyciekom pamięci i zapewnia, że aplikacja nie kontynuuje przetwarzania danych dla komponentów, które nie są już widoczne.

            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
              
            
          

Wyjaśnienie:

• Hook useEffect jest używany do wykonywania efektów ubocznych (w tym przypadku pobierania danych), gdy komponent jest montowany.
• AbortController jest tworzony wewnątrz hooka useEffect.
• Funkcja czyszcząca zwracana przez useEffect wywołuje controller.abort(), gdy komponent jest odmontowywany, zapewniając anulowanie wszelkich trwających żądań.
• Pusta tablica zależności ([]) jest przekazywana do useEffect, co wskazuje, że efekt powinien być uruchomiony tylko raz przy montowaniu i raz przy odmontowywaniu.

Wzorzec 2: Debouncing i Throttling

Debouncing i throttling to techniki używane do ograniczania częstotliwości wykonywania funkcji. Są one powszechnie stosowane w scenariuszach takich jak wyszukiwanie w trakcie pisania lub zmiana rozmiaru okna, gdzie częste zdarzenia mogą wywoływać kosztowne operacje. AbortController można używać w połączeniu z debouncingiem i throttlingiem do anulowania poprzednich żądań, gdy wystąpi nowe zdarzenie.

Przykład: Wyszukiwanie z debouncingiem i 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
              
            
          

Wyjaśnienie:

• Funkcja debouncedSearch zwraca wersję funkcji wyszukiwania z zastosowanym debouncingiem.
• Za każdym razem, gdy funkcja z debouncingiem jest wywoływana, najpierw przerywa wszelkie poprzednie żądania za pomocą controller.abort().
• Następnie tworzony jest nowy AbortController i używany do zainicjowania nowego żądania.
• Funkcja setTimeout wprowadza opóźnienie przed wykonaniem żądania, zapewniając, że wyszukiwanie jest wykonywane dopiero po tym, jak użytkownik przestanie pisać przez określony czas.

Wzorzec 3: Łączenie wielu sygnałów AbortSignal

W niektórych przypadkach może być konieczne przerwanie żądania na podstawie wielu warunków. Na przykład, możesz chcieć przerwać żądanie, jeśli wystąpi limit czasu lub jeśli użytkownik opuści stronę. Można to osiągnąć, łącząc wiele instancji AbortSignal w jeden sygnał.

Ten wzorzec nie jest bezpośrednio wspierany natywnie i zazwyczaj wymaga zaimplementowania własnej logiki łączenia.

Wzorzec 4: Limity czasowe (Timeouts) i terminy ostateczne (Deadlines)

Ustawianie limitów czasowych dla żądań jest kluczowe, aby zapobiec ich zawieszaniu się na czas nieokreślony. AbortController można łatwo wykorzystać do implementacji limitów czasowych.

            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
              
            
          

Wyjaśnienie:

• Funkcja fetchDataWithTimeout przyjmuje jako argumenty adres URL i wartość limitu czasu.
• Funkcja setTimeout jest używana do przerwania żądania po określonym czasie.
• Funkcja clearTimeout jest wywoływana zarówno w bloku try, jak i catch, aby zapewnić, że limit czasu zostanie usunięty, jeśli żądanie zakończy się pomyślnie lub wystąpi błąd.

Globalne uwarunkowania i dobre praktyki

Pracując z AbortController w kontekście globalnym, należy wziąć pod uwagę następujące kwestie:

• Lokalizacja: Komunikaty o błędach i elementy interfejsu użytkownika związane z anulowaniem żądań powinny być zlokalizowane, aby były dostępne dla użytkowników w różnych regionach.
• Warunki sieciowe: Warunki sieciowe mogą się znacznie różnić w zależności od lokalizacji geograficznej. Dostosuj wartości limitów czasowych i strategie anulowania w oparciu o oczekiwane opóźnienia sieciowe i przepustowość w różnych regionach.
• Kwestie po stronie serwera: Upewnij się, że Twoje punkty końcowe API po stronie serwera obsługują anulowane żądania w sposób łagodny. Na przykład, możesz chcieć zaimplementować mechanizm zatrzymywania przetwarzania żądania, jeśli klient je przerwał.
• Dostępność: Zapewnij użytkownikom jasne i informacyjne komunikaty zwrotne, gdy żądanie zostanie anulowane. Może to pomóc użytkownikom zrozumieć, dlaczego żądanie zostało anulowane i podjąć odpowiednie działania.
• Urządzenia mobilne a komputery stacjonarne: Użytkownicy mobilni mogą mieć bardziej niestabilne połączenia, upewnij się, że Twoje limity czasowe i obsługa błędów są solidne dla urządzeń mobilnych.
• Różne przeglądarki: Rozważ testowanie na różnych przeglądarkach i ich wersjach, aby sprawdzić ewentualne problemy z kompatybilnością API AbortController.

Obsługa błędów

Prawidłowa obsługa błędów jest kluczowa przy używaniu AbortController. Zawsze sprawdzaj, czy wystąpił AbortError i obsługuj go odpowiednio.

            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
              
            
          

Podsumowanie

JavaScript AbortController to potężne narzędzie do zarządzania operacjami asynchronicznymi oraz poprawy wydajności i responsywności aplikacji internetowych. Rozumiejąc podstawowe użycie i zaawansowane wzorce, możesz tworzyć bardziej solidne i wydajne aplikacje, które zapewniają lepsze doświadczenie użytkownika dla globalnej publiczności. Pamiętaj, aby uwzględnić lokalizację, warunki sieciowe i kwestie po stronie serwera podczas implementowania anulowania żądań w swoich aplikacjach.

Wykorzystując wzorce opisane powyżej, programiści mogą pewnie zarządzać operacjami asynchronicznymi, optymalizować wykorzystanie zasobów i dostarczać wyjątkowe doświadczenia użytkownika w różnych środowiskach i dla globalnej publiczności.

Ten kompleksowy przewodnik powinien stanowić solidną podstawę do opanowania wzorców anulowania żądań przy użyciu AbortController w JavaScript. Udanego kodowania!