Fetch API request timeout ?

Question

J'ai un fetch-api POST demande :

fetch(url, {
  method: 'POST',
  body: formData,
  credentials: 'include'
})

Je veux savoir quel est le délai d'attente par défaut pour cela ? et comment le régler sur une valeur particulière comme 3 secondes ou des secondes indéfinies ?

Answer 1

L'utilisation d'une solution de course aux promesses laissera la demande en suspens et continuera à consommer de la bande passante en arrière-plan, ce qui réduira le nombre maximal de demandes simultanées autorisées pendant qu'elle est en cours de traitement.

Utilisez plutôt le AbortController pour interrompre réellement la demande. Voici un exemple

const controller = new AbortController()

// 5 second timeout:
const timeoutId = setTimeout(() => controller.abort(), 5000)

fetch(url, { signal: controller.signal }).then(response => {
  // completed request before timeout fired

  // If you only wanted to timeout the request, not the response, add:
  // clearTimeout(timeoutId)
})

---

AbortController peut être utilisé pour d'autres choses aussi, pas seulement pour la récupération mais aussi pour les flux lisibles/inscriptibles. Les nouvelles fonctions (en particulier celles qui sont basées sur les promesses) l'utiliseront de plus en plus. NodeJS a également implémenté AbortController dans son système de flux/fichiers. Je sais que Bluetooth Web s'y intéresse également. Maintenant, il peut également être utilisé avec l'option addEventListener et arrêter l'écoute lorsque le signal se termine.

Answer 2

Modifier si vous souhaitez une solution encore plus propre qui traite tous les cas limites, choisissez cette réponse : https://stackoverflow.com/a/57888548/1059828 .

J'aime vraiment l'approche propre de cette Gist en utilisant Promesse.race

fetchWithTimeout.js

export default function (url, options, timeout = 7000) {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) =>
            setTimeout(() => reject(new Error('timeout')), timeout)
        )
    ]);
}

main.js

import fetch from './fetchWithTimeout'

// call as usual or with timeout as 3rd argument

fetch('http://google.com', options, 5000) // throw after max 5 seconds timeout error
.then((result) => {
    // handle result
})
.catch((e) => {
    // handle errors and timeout error
})

Answer 3

Edit 1

Comme indiqué dans les commentaires, le code de la réponse originale continue de faire tourner le minuteur même après la résolution/le rejet de la promesse.

Le code ci-dessous corrige ce problème.

function timeout(ms, promise) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      reject(new Error('TIMEOUT'))
    }, ms)

    promise
      .then(value => {
        clearTimeout(timer)
        resolve(value)
      })
      .catch(reason => {
        clearTimeout(timer)
        reject(reason)
      })
  })
}

---

Réponse originale

Il n'y a pas de défaut spécifié ; la spécification ne parle pas du tout des délais d'attente.

Vous pouvez implémenter votre propre enveloppe de délai d'attente pour les promesses en général :

// Rough implementation. Untested.
function timeout(ms, promise) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      reject(new Error("timeout"))
    }, ms)
    promise.then(resolve, reject)
  })
}

timeout(1000, fetch('/hello')).then(function(response) {
  // process response
}).catch(function(error) {
  // might be a timeout error
})

Comme décrit dans https://github.com/github/fetch/issues/175 Commentaire de https://github.com/mislav

Answer 4

Il n'y a pas encore de support pour les délais dans l'API de récupération. Mais cela pourrait être réalisé en l'enveloppant dans une promesse.

par exemple.

  function fetchWrapper(url, options, timeout) {
    return new Promise((resolve, reject) => {
      fetch(url, options).then(resolve, reject);

      if (timeout) {
        const e = new Error("Connection timed out");
        setTimeout(reject, timeout, e);
      }
    });
  }

Answer 5

EDIT : La requête de récupération sera toujours exécutée en arrière-plan et enregistrera très probablement une erreur dans votre console.

En effet, le Promise.race est meilleure.

Voir ce lien pour référence Promise.race()

La course signifie que toutes les promesses seront exécutées en même temps, et que la course s'arrêtera dès que l'une des promesses renverra une valeur. Par conséquent, une seule valeur sera retournée . Vous pouvez également passer une fonction à appeler si la recherche échoue.

fetchWithTimeout(url, {
  method: 'POST',
  body: formData,
  credentials: 'include',
}, 5000, () => { /* do stuff here */ });

Si cela suscite votre intérêt, une mise en œuvre possible serait :

function fetchWithTimeout(url, options, delay, onTimeout) {
  const timer = new Promise((resolve) => {
    setTimeout(resolve, delay, {
      timeout: true,
    });
  });
  return Promise.race([
    fetch(url, options),
    timer
  ]).then(response => {
    if (response.timeout) {
      onTimeout();
    }
    return response;
  });
}