In diesem Blog führe ich Sie durch die praktischen Schritte zum Abbrechen einer Abrufanforderung mithilfe von JavaScript, wobei der Schwerpunkt auf der AbortController-API liegt. Am Ende werden Sie ein klares Verständnis dafür haben, wie Sie Ihre Web-Apps reaktionsfähiger und ressourcenschonender gestalten können.

Warum sollten Sie eine Abrufanforderung stornieren?

Das Abbrechen von Abrufanforderungen ist in Szenarien von entscheidender Bedeutung, in denen:

• Benutzererfahrung: Wenn Benutzer eine Seite verlassen, ist es nicht erforderlich, weiterhin Daten für diese Seite abzurufen.

• Suchoptimierung: Bei Suchfunktionen, bei denen jeder Tastendruck eine Anfrage auslöst, ist es effizienter, die vorherige Anfrage abzubrechen, bevor eine neue gesendet wird.

• Timeout-Szenarien: Bei Netzwerkverzögerungen oder lang andauernden Anfragen möchten Sie möglicherweise ein Timeout festlegen und die Anfrage abbrechen, wenn sie eine bestimmte Dauer überschreitet.

AbortController verstehen

Die AbortController-API bietet eine elegante Möglichkeit, Abrufanforderungen abzubrechen. Dies funktioniert durch die Erstellung einer AbortController-Instanz, deren Signal an die Abrufanforderung übergeben wird. Wenn Sie die Methode abort() auf dem Controller aufrufen, wird die Anfrage abgebrochen.

Schritt-für-Schritt-Anleitung zum Abbrechen von Abrufanfragen

1. Grundlegende Einrichtung mit AbortController

Beginnen wir mit dem einfachsten Beispiel: Erstellen eines AbortControllers und Abbrechen einer Abrufanforderung.

// Step 1: Create an instance of AbortController
const controller = new AbortController();

// Step 2: Pass the signal to the fetch request
fetch('https://jsonplaceholder.typicode.com/posts', { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log('Data:', data))
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('Fetch request was canceled');
        } else {
            console.error('Fetch error:', err);
        }
    });

// Step 3: Cancel the fetch request
controller.abort();

2. Praktischer Anwendungsfall: Anfragen zur Benutzerinteraktion stornieren
Ein häufiges Szenario ist das Abbrechen einer Abrufanforderung als Reaktion auf eine Benutzerinteraktion. Wenn Sie beispielsweise eine Suchfunktion implementieren, kann jeder Tastendruck eine neue Abrufanforderung auslösen. Durch das Abbrechen der vorherigen Anfrage wird verhindert, dass veraltete oder irrelevante Daten verarbeitet werden.

let controller;

function search(query) {
    // Cancel the previous request if it exists
    if (controller) {
        controller.abort();
    }

    // Create a new controller for the new request
    controller = new AbortController();

    // Fetch data with the new controller
    fetch(`https://jsonplaceholder.typicode.com/posts?query=${query}`, { signal: controller.signal })
        .then(response => response.json())
        .then(data => console.log('Search results:', data))
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Previous request canceled');
            } else {
                console.error('Fetch error:', err);
            }
        });
}

// Example usage: simulate user typing
search('React');
search('Vue'); // The request for 'React' is canceled

3. Timeout für Abrufanfragen implementieren
Zeitüberschreitungen sind bei unzuverlässigen Netzwerkbedingungen unerlässlich. Mit AbortController können Sie ganz einfach einen Timeout-Mechanismus implementieren, der die Abrufanforderung abbricht, wenn sie zu lange dauert.

function fetchWithTimeout(url, timeout = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);

    return fetch(url, { signal: controller.signal })
        .then(response => {
            clearTimeout(timeoutId);
            return response.json();
        })
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Fetch request timed out');
            } else {
                console.error('Fetch error:', err);
            }
        });
}

// Example usage
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', 3000)
    .then(data => console.log('Data:', data));

Behandeln Sie die Stornierung einer Abrufanforderung ordnungsgemäß

Beim Abbrechen von Abrufanfragen ist es wichtig, diese ordnungsgemäß zu behandeln. Dabei wird zwischen Fehlern durch Stornierungen und anderen Fehlerarten unterschieden.

fetch(url, { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => {
        if (err.name === 'AbortError') {
            // Handle cancellation specifically
            console.log('Request was canceled');
        } else {
            // Handle other types of errors
            console.error('Request failed', err);
        }
    });