Snippet

Abbrechen laufender asynchroner Fetch-Anfragen in React-Effects mittels AbortController

Beim Abrufen von Daten in einem useEffect-Hook können schnelle Prop-Änderungen oder das Unmounten von Komponenten zu Race Conditions und Speicherlecks führen. Durch die Kombination des standardmäßigen Web-API AbortController mit dem fetch-Signal werden laufende HTTP-Anfragen in der Aufräumfunktion des Effects sauber abgebrochen und erwartete 'AbortError'-Ausnahmen ignoriert.

snippet.js

javascript

import { useState, useEffect } from 'react';
 
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
 
    async function loadUserData() {
      try {
        const res = await fetch(`/api/users/${userId}`, { signal });
        const data = await res.json();
        setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error('Fetch failed:', err);
        }
      }
    }
 
    loadUserData();
 
    return () => {
      controller.abort();
    };
  }, [userId]);
 
  return user ? <div>{user.name}</div> : <p>Loading...</p>;
}

react

Erklärung

const controller = new AbortController();

Instanziiert einen neuen Controller, um ein Abbruchsignal für asynchrone Operationen zu erzeugen.

const res = await fetch(`/api/users/${userId}`, { signal });

Übergibt das Abort-Signal des Controllers an fetch, um den Netzwerkzyklus an die Komponente zu binden.

if (err.name !== 'AbortError') {

Unterscheidet gewollte Abbrüche durch Aufräumarbeiten von echten Netzwerk- oder Verarbeitungsfehlern.

return () => { controller.abort(); };

Aufräum-Callback, der bei Abhängigkeitswechseln oder beim Unmounten ausgeführt wird und die Anfrage abbricht.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Abbrechen laufender asynchroner Fetch-Anfragen in React-Effects mittels AbortController

Verwandt