javascript / expert
Snippet
Orchestrierung des Aufgabenabbruchs mit AbortController
Die Verwendung von AbortController in useEffect stellt sicher, dass laufende Netzwerk-Anfragen abgebrochen werden, wenn die Komponente unmontiert wird oder sich die URL ändert. Dies verhindert Race-Conditions und das Aktualisieren des States einer unmontierten Komponente.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
useEffect(() => {const controller = new AbortController();const fetchData = async () => {try {const response = await fetch(url, { signal: controller.signal });const data = await response.json();setState(data);} catch (err) {if (err.name !== 'AbortError') console.error(err);}};fetchData();return () => controller.abort();}, [url]);
react
Erklärung
1
const controller = new AbortController();
Erstellt eine neue Controller-Instanz, um das Abort-Signal zu verwalten.
2
signal: controller.signal
Übergibt das Signal an den Fetch-Request, wodurch dieser extern beendet werden kann.
3
return () => controller.abort();
Die Cleanup-Funktion löst den Abbruch aus, wenn der Effekt erneut ausgeführt oder die Komponente unmontiert wird.