javascript / intermediate
Snippet
Abbrechen von Fetch-Anfragen mit AbortController
Die Verwendung von AbortController verhindert Race Conditions und Speicherlecks, indem Netzwerkanfragen abgebrochen werden, wenn eine Next.js-Komponente entfernt wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
useEffect(() => {const controller = new AbortController();fetch('/api/data', { signal: controller.signal }).then(res => res.json()).catch(err => {if (err.name === 'AbortError') console.log('Fetch aborted');});return () => controller.abort();}, []);
nextjs
Erklärung
1
const controller = new AbortController();
Erstellt eine Instanz, um den Abbruch der Anfrage zu steuern und zu signalisieren.
2
return () => controller.abort();
Bereinigungsfunktion, die die Anfrage abbricht, wenn die Komponente neu gerendert oder demontiert wird.