Comment utiliser Promise.race pour ajouter un délai d'attente pour récupérer les appels

L'API fetch est très pratique pour effectuer des requêtes réseau, mais elle n'est pas livrée avec une fonction de délai d'attente intégrée. Cela signifie que votre application peut se bloquer indéfiniment si le réseau est lent ou si le serveur ne répond pas.

Heureusement, JavaScript est un langage polyvalent, centré sur la programmation événementielle, fournissant un ensemble de fonctions utilitaires regroupées dans l'objet Promise. En utilisant la méthode Promise.race, nous pouvons créer un mécanisme de délai d'attente pour nos appels de récupération. De cette façon, nous pouvons garder nos applications réactives, même lorsque les choses ne se passent pas comme prévu avec le réseau.

Je vais donc vous expliquer comment implémenter ce délai d'attente à l'aide de Promise.race. Nous commencerons par un exemple de récupération simple, puis nous l'améliorerons en ajoutant un délai d'attente. Je partagerai également un scénario réel dans lequel nous traitons des jetons CSRF pour vous montrer comment cette méthode fonctionne dans un contexte sécurisé.

Supposons que nous ayons ceci :

// 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);

Si nous voulons ajouter un mécanisme de délai d'attente pour récupérer, nous pouvons créer une promesse avec un délai d'attente qui déclenche un rejet. La promesse utilise Promise.race, pour exécuter plusieurs promesses et lorsque l'on termine par rejet ou résolution, arrête tout le reste.

// 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);

Voici un exemple réel avec des jetons CSRF

// 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);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!