javascript / expert
Snippet
Verwaltung asynchroner Race Conditions mit AbortController und Signalen
Wenn mehrere Anfragen kurz hintereinander abgefeuert werden (z. B. beim Tippen), können ältere Anfragen nach neueren aufgelöst werden, was zu veralteten Daten führt. Mit AbortController können Sie vorherige Anfragen in der useEffect-Bereinigungsfunktion abbrechen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
'use client';import { useState, useEffect } from 'react';export default function AsyncSearch({ query }: { query: string }) {const [data, setData] = useState([]);useEffect(() => {const controller = new AbortController();(async () => {try {const res = await fetch(`/api/data?q=${query}`, { signal: controller.signal });setData(await res.json());} catch (err: any) {if (err.name !== 'AbortError') console.error(err);}})();return () => controller.abort();}, [query]);return <div>{JSON.stringify(data)}</div>;}
nextjs
Erklärung
1
signal: controller.signal
Verknüpft die Fetch-Anfrage mit einem Abort-Signal, um eine programmatische Stornierung zu ermöglichen.
2
controller.abort()
Bricht die Anfrage in der Bereinigungsfunktion ab, um Status-Updates bei unmontierten Komponenten oder veralteten Abfragen zu verhindern.