Der einfache Weg, Abrufanfragen abzubrechen, wenn Sie sie nicht benötigen

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 machen können.

Warum sollten Sie eine Abrufanforderung stornieren?

Das Abbrechen von Abrufanforderungen ist in folgenden Szenarien von entscheidender Bedeutung:

• Benutzererfahrung: Wenn Benutzer eine Seite verlassen, besteht keine Notwendigkeit, 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: Abbrechen von Anfragen zur Benutzerinteraktion
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 Fehlern anderer Art 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);
        }
    });

Das obige ist der detaillierte Inhalt vonDer einfache Weg, Abrufanfragen abzubrechen, wenn Sie sie nicht benötigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!