Window : méthode fetchLater()

Syntaxe

fetchLater(resource)
fetchLater(resource, options)

Paramètres

La méthode fetchLater() prend tous les mêmes paramètres que fetch(), mais avec une option supplémentaire activateAfter.

resource

Cela définit la ressource que vous souhaitez récupérer. Identique à fetch(), cela peut être :

• Une chaîne de caractères ou tout autre objet avec une conversion en chaîne de caractères — y compris un objet URL — qui fournit l'URL de la ressource que vous souhaitez récupérer. L'URL peut être relative à l'URL de base, qui est le baseURI du document dans un contexte de fenêtre.
• Un objet Request.

options Facultatif

Un objet DeferredRequestInit contenant tous les paramètres personnalisés que vous souhaitez appliquer à la requête, y compris une valeur de délai activateAfter qui définit combien de temps le résultat doit être différé avant l'envoi.

Exceptions

Les mêmes exceptions que pour fetch() peuvent être levées pour fetchLater(), ainsi que les exceptions supplémentaires suivantes :

QuotaExceededError

L'utilisation de cette fonctionnalité a été bloquée en raison du dépassement du quota disponible. Voir les quotas de fetchLater() pour plus de détails. Les appelants de fetchLater() doivent être prudents et gérer les erreurs QuotaExceededError dans presque tous les cas, surtout s'ils intègrent du JavaScript tiers.

RangeError DOMException

Levée lorsqu'une valeur négative pour activateAfter est définie.

TypeError DOMException

En plus des raisons pour fetch(), cette exception sera également levée pour une requête ReadableStream (qui ne peut pas être différée) ou pour l'utilisation d'URL non fiables (comme http://).

Valeur de retour

Un objet FetchLaterResult contenant une propriété booléenne activated indiquant si la requête a déjà été envoyée.

Exemples

L'article sur les quotas de fetchLater() fournit des exemples de l'application des quotas.

Différer une requête GET jusqu'à ce que la page soit quittée ou fermée

fetchLater("/send_beacon");

Différer une requête POST pendant environ une minute

Dans cet exemple, nous créons un objet Request, et fournissons une valeur activateAfter pour retarder l'envoi de la requête de 60 000 millisecondes (ou une minute) :

fetchLater("/send_beacon", {
  method: "POST",
  body: getBeaconData(),
  activateAfter: 60000, // 1 minute
});

Différer une requête POST pendant environ une minute avec un try/catch

Le même exemple que ci-dessus, mais la meilleure pratique consiste à l'encapsuler dans un try/catch :

try {
  fetchLater("/send_beacon", {
    method: "POST",
    body: getBeaconData(),
    activateAfter: 60000, // 1 minute
  });
} catch (e) {
  if (e instanceof QuotaExceededError) {
    // Gérer l'erreur de quota
  } else {
    // Gérer les autres erreurs
  }
}

Différer une requête POST pendant environ une minute et créer une fonction pour vérifier si elle a été envoyée

const result = fetchLater("https://report.exemple.com", {
  method: "POST",
  body: JSON.stringify(myReport),
  activateAfter: 60000 /* 1 minute */,
});

function checkIfFetched() {
  return result.activated;
}

Mettre à jour une requête en attente

Dans cet exemple, nous utilisons un AbortController pour annuler et recréer la requête :

let beaconResult = null;
let beaconAbort = null;

function updateBeacon(data) {
  const pending = !beaconResult || !beaconResult.activated;
  if (pending && beaconAbort) {
    beaconAbort.abort();
  }

  createBeacon(data);
}

function createBeacon(data) {
  if (beaconResult && !beaconResult.activated) {
    // Éviter de créer un beacon dupliqué si le précédent est encore en attente.
    return;
  }

  beaconAbort = new AbortController();
  beaconResult = fetchLater({
    url: data,
    signal: beaconAbort.signal,
  });
}

Exemples invalides

Toutes les appels suivants à fetchLater() généreraient une exception :

// Seules les URL potentiellement fiables sont prises en charge
fetchLater("http://untrusted.exemple.com");

// La longueur de la requête différée doit être connue
fetchLater("https://origin.exemple.com", { body: someDynamicStream });

// Le fetch différé ne fonctionne que sur les fenêtres actives
const detachedWindow = iframe.contentWindow;
iframe.remove();
detachedWindow.fetchLater("https://origin.exemple.com");

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utiliser la récupération différée
• L'interface FetchLaterResult
• L'API Fetch