So verwenden Sie Promise.race, um eine Zeitüberschreitung zum Abrufen von Anrufen hinzuzufügen

Die Abruf-API ist sehr praktisch für Netzwerkanfragen, verfügt jedoch nicht über eine integrierte Timeout-Funktion. Dies bedeutet, dass Ihre App möglicherweise auf unbestimmte Zeit hängen bleibt, wenn das Netzwerk langsam ist oder der Server nicht antwortet.

Glücklicherweise ist JavaScript eine vielseitige Sprache, die sich auf ereignisgesteuerte Programmierung konzentriert und eine Reihe von Hilfsfunktionen bereitstellt, die im Promise-Objekt gruppiert sind. Mit der Promise.race-Methode können wir einen Timeout-Mechanismus für unsere Abrufaufrufe erstellen. Auf diese Weise können wir unsere Anwendungen reaktionsfähig halten, auch wenn die Dinge mit dem Netzwerk nicht wie geplant laufen.

Also, ich werde Ihnen zeigen, wie Sie dieses Timeout mit Promise.race implementieren. Wir beginnen mit einem einfachen Abrufbeispiel und erweitern es dann durch Hinzufügen eines Timeouts. Ich werde auch ein reales Szenario vorstellen, in dem wir mit CSRF-Tokens arbeiten, um Ihnen zu zeigen, wie diese Methode in einem sicheren Kontext funktioniert.

Nehmen wir an, wir haben Folgendes:

// Prepare fetch options
const options = {
    method: method,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrfToken
    },
    body: JSON.stringify({items})
};

// Make the fetch request
const response = await fetch(fetchUrl, options);

Wenn wir beim Abrufen einen Timeout-Mechanismus hinzufügen möchten, können wir ein Versprechen mit einem Timeout erstellen, das eine Ablehnung auslöst. Das Versprechen nutzt Promise.race, um mehrere Versprechen auszuführen, und wenn eines mit „Ablehnen“ oder „Auflösen“ endet, werden alle anderen gestoppt.

// Timeout mechanism for fetch
const fetchWithTimeout = (url, options, timeout = 5000) => {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) => setTimeout(() => reject(new Error('Request timed out')), timeout))
    ]);
};

// Make the fetch request
const response = await fetchWithTimeout(fetchUrl, options);

Hier ist ein reales Beispiel mit CSRF-Tokens

// Validate CSRF token
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
if (!csrfToken) {
    throw new Error('CSRF token not found in the document.');
}

// Prepare fetch options
const options = {
    method: method,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrfToken
    },
    body: JSON.stringify({items})
};

// Timeout mechanism for fetch
const fetchWithTimeout = (url, options, timeout = 5000) => {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) => setTimeout(() => reject(new Error('Request timed out')), timeout))
    ]);
};

// Make the fetch request
const response = await fetchWithTimeout(fetchUrl, options);

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Promise.race, um eine Zeitüberschreitung zum Abrufen von Anrufen hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!