javascript / expert
Snippet
Vermeidung von Race-Conditions mittels AbortController in Hooks
Die Verwendung von AbortController in useEffect ist entscheidend, um Race-Conditions zu vermeiden. Wenn sich die Abhängigkeit ändert oder die Komponente unmountet, brechen wir den laufenden Fetch ab. Dies stellt sicher, dass eine spät eintreffende Antwort einer alten Anfrage nicht den Status einer neueren Anfrage überschreibt.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
useEffect(() => {const controller = new AbortController();const fetchData = async () => {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 Instanz, um den Abbruch von Web-Anfragen zu steuern.
2
signal: controller.signal
Übergibt das Abort-Signal an die Fetch-Optionen, um die Anfrage abbrechbar zu machen.
3
return () => controller.abort();
Cleanup-Funktion, die vor dem nächsten Effekt oder beim Unmounten ausgeführt wird und den Abbruch auslöst.