Window : méthode fetch()

Syntaxe

fetch(resource)
fetch(resource, options)

Paramètres

resource

Définit la ressource à récupérer. Cela peut être :

• Une chaîne de caractères ou tout objet disposant d'un stringifier — y compris un objet URL — qui fournit l'URL de la ressource à récupérer. L'URL peut être relative à l'URL de base, qui est baseURI dans le contexte d'une fenêtre, ou WorkerGlobalScope.location dans un worker.
• Un objet Request.

options Facultatif

Un objet RequestInit contenant les paramètres personnalisés à appliquer à la requête.

Valeur de retour

Une Promise qui se résout avec un objet Response.

Exceptions

AbortError DOMException

La requête a été annulée suite à un appel à la méthode AbortController abort().

NotAllowedError DOMException

Levée si l'utilisation de l'API Topics est explicitement interdite par une politique de permissions browsing-topics et qu'une requête fetch() a été faite avec browsingTopics: true.

TypeError

Peut survenir pour les raisons suivantes :

• L'URL demandée est invalide.
• L'URL demandée inclut des identifiants (nom d'utilisateur et mot de passe).
• L'objet RequestInit passé dans options contient des propriétés avec des valeurs invalides.
• La requête est bloquée par une politique de permissions.
• Il y a une erreur réseau (par exemple, si l'appareil n'a pas de connectivité).

Exemples

Dans l'exemple Fetch Request ^(angl.) (voir en direct), on crée un nouvel objet Request à l'aide du constructeur approprié, puis on le récupère avec un appel à fetch(). Comme il s'agit d'une image, on utilise Response.blob() sur la réponse pour obtenir le bon type MIME, puis on crée une URL objet et on l'affiche dans un élément <img>.

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

window
  .fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

Dans l'exemple Fetch Request avec init ^(angl.) (voir en direct), on fait la même chose sauf qu'on passe un objet options lors de l'appel à fetch(). On peut alors définir une valeur Cache-Control pour indiquer le type de réponses en cache acceptées :

const myImage = document.querySelector("img");
const reqHeaders = new Headers();

// Une réponse en cache est acceptée sauf si elle a plus d'une semaine
reqHeaders.set("Cache-Control", "max-age=604800");

const options = {
  headers: reqHeaders,
};

// On passe l'objet "options" avec nos en-têtes.
const req = new Request("flowers.jpg", options);

fetch(req).then((response) => {
  // …
});

On peut aussi passer l'objet init au constructeur Request pour obtenir le même effet :

const req = new Request("flowers.jpg", options);

On peut également utiliser un objet littéral comme headers dans init :

const options = {
  headers: {
    "Cache-Control": "max-age=60480",
  },
};

const req = new Request("flowers.jpg", options);

L'article Utiliser fetch fournit d'autres exemples d'utilisation de fetch().

Spécifications

Compatibilité des navigateurs

Voir aussi

• WorkerGlobalScope.fetch()
• L'API Fetch
• L'API ServiceWorker
• Contrôle d'accès HTTP (CORS)
• HTTP