javascript / expert
Snippet
Vermeidung von Race Conditions mit AbortController
Beim Abrufen von Daten in useEffect tritt eine Race Condition auf, wenn sich die URL ändert, bevor die vorherige Anfrage abgeschlossen ist. AbortController bricht veraltete Anfragen in der Cleanup-Phase ab.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
useEffect(() => {const controller = new AbortController();async function fetchData() {try {const response = await fetch(url, { signal: controller.signal });const data = await response.json();setData(data);} catch (err) {if (err.name === 'AbortError') return;console.error('Fetch error:', err);}}fetchData();return () => controller.abort();}, [url]);
react
Erklärung
1
const controller = new AbortController();
Erstellt eine neue Instanz zur Steuerung des Signals für die Fetch-Anfrage.
2
return () => controller.abort();
Die Cleanup-Funktion wird ausgelöst, wenn die Komponente unmountet oder sich Abhängigkeiten ändern.