Jak używać hooka useEffect z kontrolerem AbortController?

W nowoczesnym tworzeniu stron internetowych obsługa operacji asynchronicznych, takich jak pobieranie danych z interfejsów API, jest powszechnym wymogiem. Czasami jednak operacje te mogą trwać dłużej niż oczekiwano, co prowadzi do problemów z wydajnością i niepotrzebnego zużycia zasobów. Aby temu zaradzić, JavaScript wprowadził interfejs AbortController, który zapewnia sposób na anulowanie trwających operacji asynchronicznych. W połączeniu z hookiem useEffect Reacta, AbortController pozwala nam efektywnie zarządzać żądaniami asynchronicznymi i zapobiegać wyciekom pamięci. W tym artykule pokażę, jak używać AbortController z useEffect w Reakcie.

Czym jest AbortController?

Interfejs AbortController jest wbudowany w nowoczesne przeglądarki i zapewnia prosty mechanizm przerywania zadań asynchronicznych. Składa się on z obiektu AbortController i powiązanego z nim obiektu AbortSignal. AbortController udostępnia metodę abort() do anulowania trwającej operacji, podczas gdy obiekt AbortSignal ma właściwość aborted wskazującą, czy operacja została przerwana.

Dlaczego powinniśmy go używać?

Korzystanie z AbortController podczas wykonywania żądań API zapewnia kilka korzyści:

• Efektywne zarządzanie zasobami: W scenariuszach, w których wykonanie żądania API trwa dłużej, anulowanie żądania za pomocą AbortController zapobiega niepotrzebnemu zużyciu zasobów. Przerywając żądanie, zwalniasz zasoby sieciowe, pamięć i moc obliczeniową związane z trwającą operacją, poprawiając w ten sposób ogólną wydajność.
• Szybsze doświadczenie użytkownika: Jeśli użytkownik inicjuje wiele żądań API i szybko opuszcza stronę lub wykonuje inną akcję, anulowanie oczekujących żądań za pomocą AbortController zapewnia, że aplikacja nie marnuje czasu i zasobów na przetwarzanie odpowiedzi, które nie są już potrzebne. Prowadzi to do szybszego i bardziej responsywnego doświadczenia użytkownika.
• Zapobieganie Race Conditions: W niektórych przypadkach wiele żądań API może być inicjowanych jednocześnie. Dzięki AbortController można anulować poprzednie żądania, gdy uruchamiane są nowe, zapobiegając warunkom wyścigu, w których nieaktualne odpowiedzi zastępują wyniki ostatniego żądania. Zapewnia to, że wyświetlane dane pozostają dokładne i aktualne.
• Zgrabna obsługa błędów: Po anulowaniu żądania API za pomocą AbortController, powiązana obietnica jest odrzucana z błędem AbortError. Pozwala to na obsługę anulowania jako konkretnego przypadku błędu i wdrożenie odpowiedniej logiki obsługi błędów. Zapewnia to lepszą kontrolę nad sposobem, w jaki aplikacja reaguje na anulowane żądania, umożliwiając wyświetlanie komunikatów informacyjnych lub wykonywanie działań awaryjnych.
• Skalowalność i optymalizacja wydajności: W przypadku złożonych aplikacji z wieloma komponentami i operacjami pobierania danych, zarządzanie trwającymi żądaniami API staje się kluczowe dla skalowalności i wydajności. Korzystając z AbortController, można skutecznie obsługiwać anulowanie i czyszczenie żądań, zapobiegając wyciekom pamięci i niepotrzebnemu wykorzystaniu zasobów, poprawiając w ten sposób skalowalność i wydajność aplikacji.

Jak używać go w Javascript?

Oto podstawowy przykład tego, jak można użyć AbortController do przerwania żądania pobierania:

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

/// Rozpoczęcie żądania pobierania
fetch('https://api.example.com/data', { signal })
    .then(response => {
        // Przetwarzanie odpowiedzi
    })
    .catch(error => {
        if (error.name === 'AbortError') {
            console.log('Request aborted');
        } else {
            console.log('Error:', error);
        }
    });

// Przerwanie żądania po 5 sekundach
setTimeout(() => {
    controller.abort();
}, 5000);

Interfejs AbortController składa się z dwóch głównych części: obiektu AbortController i obiektu AbortSignal.

1. AbortController: Jest to główny obiekt, który kontroluje przerwanie operacji asynchronicznej. Posiada dwie metody: – abort(): Ta metoda przerywa powiązaną operację, anulując wszelkie oczekujące żądania lub działania. Podnosi zdarzenie AbortSignal, wskazując, że operacja została przerwana. – signal: Ta właściwość zwraca obiekt AbortSignal powiązany z kontrolerem.
2. AbortSignal: Jest to obiekt reprezentujący sygnał używany do anulowania. Ma on jedną właściwość: – aborted: Ta właściwość jest wartością logiczną, która wskazuje, czy powiązana operacja została przerwana (true), czy nie (false).

Jak użyć go w Reakcie za pomocą hooka useEffect?

Hook useEffect w Reakcie pozwala nam na wykonywanie efektów ubocznych, takich jak pobieranie danych, gdy komponent jest montowany, aktualizowany lub odmontowywany. Integrując AbortController z useEffect, możemy anulować trwające żądania, gdy komponent zostanie odmontowany lub gdy zmieni się zależność.

Oto przykład użycia AbortController z useEffect:

import React, { useEffect } from 'react';

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

        // Rozpoczęcie operacji asynchronicznej
        fetchData(signal)
            .then(response => {
                // Obsługa odpowiedzi
            })
            .catch(error => {
                if (error.name === 'AbortError') {
                    console.log('Request aborted');
                } else {
                    console.log('Error:', error);
                }
            });

        return () => {
            // rzerwanie żądania, gdy komponent zostanie odinstalowany lub gdy zmieni się zależność.
            controller.abort();
        };
    }, []);

    return <div>My Component</div>;
};

export default MyComponent;

W powyższym przykładzie utworzyliśmy instancję AbortController i uzyskaliśmy powiązany AbortSignal w hooku useEffect. Zainicjowaliśmy asynchroniczną operację fetchData(), przekazując sygnał jako argument. Jeśli komponent zostanie odmontowany lub zmieni się zależność, uruchomiona zostanie funkcja czyszczenia zwrócona przez useEffect. Wewnątrz funkcji czyszczenia wywołaliśmy funkcję abort() na kontrolerze, aby anulować żądanie.

Integrując AbortController z useEffect, zapewniamy, że każda trwająca operacja asynchroniczna jest prawidłowo anulowana, gdy nie jest już potrzebna. Zapobiega to potencjalnym wyciekom pamięci i poprawia ogólną wydajność naszej aplikacji React.

Słowa na koniec

Operacje asynchroniczne są istotną częścią tworzenia stron internetowych, ale kluczowe jest efektywne zarządzanie nimi. Dzięki interfejsowi AbortController i hookowi useEffect w Reakcie możemy z łatwością obsługiwać żądania asynchroniczne i zapobiegać niepotrzebnemu zużyciu zasobów. Anulując trwające operacje, gdy komponenty są odmontowywane lub gdy zmieniają się zależności, możemy poprawić wydajność i zapewnić płynniejsze wrażenia użytkownika. Połączenie AbortController i useEffect jest potężnym narzędziem w naszym zestawie narzędzi do zarządzania zadaniami asynchronicznymi w aplikacjach React.