javascript / intermediate
Snippet
Abbrechen laufender HTTP-Anfragen bei Komponenten-Demontage mit AbortController
Durch Instanziierung eines `AbortController` in `useEffect` wird der Lebenszyklus der Komponente mit asynchronen `fetch`-Aufrufen verknüpft. Das Ausführen von `controller.abort()` in der Bereinigungsfunktion bricht laufende Anfragen sauber ab, während `err.name !== 'AbortError'` gewollte Abbrüche ignoriert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function SearchResults({ query }) {const [results, setResults] = React.useState([]);const [isLoading, setIsLoading] = React.useState(false);React.useEffect(() => {const controller = new AbortController();const { signal } = controller;async function performSearch() {setIsLoading(true);try {const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal });const data = await response.json();setResults(data);} catch (err) {if (err.name !== 'AbortError') {console.error('Fetch operation failed:', err);}} finally {setIsLoading(false);}}if (query) performSearch();return () => {controller.abort();};}, [query]);return (<div>{isLoading && <span>Searching...</span>}<ul>{results.map((r) => <li key={r.id}>{r.title}</li>)}</ul></div>);}
react
Erklärung
1
const controller = new AbortController();
Erstellt ein Abbruchsignal speziell für den aktuellen Ausführungszyklus des Hooks.
2
const response = await fetch(..., { signal });
Übergibt das Signal an fetch, um netzwerkseitige Abbrüche bei Bedarf zu ermöglichen.
3
if (err.name !== 'AbortError') {
Filtert reguläre Abbruch-Exceptions heraus, damit geplante Demontagen keine Fehler protokollieren.