Window : méthode fetch() - Les API Web | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

Window : méthode fetch()

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La méthode fetch() de l'interface Window lance le processus de récupération d'une ressource sur le réseau et retourne une promesse qui est résolue lorsque la réponse est disponible.

La promesse est résolue avec l'objet Response représentant la réponse à votre requête.

Une promesse fetch() n'est rejetée que si la requête échoue, par exemple à cause d'une URL mal formée ou d'une erreur réseau. Une promesse fetch() n'est pas rejetée si le serveur répond avec un code d'état HTTP signalant une erreur (404, 504, etc.). Dans ce cas, il faut vérifier les propriétés Response.ok et/ou Response.status dans le gestionnaire then().

La méthode fetch() est contrôlée par la directive connect-src de la politique de sécurité du contenu (CSP), et non par la directive des ressources récupérées.

Note : Les paramètres de la méthode fetch() sont identiques à ceux du constructeur Request().

Dans cet article

Syntaxe

js
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'une conversion en chaîne de caractères — 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

Déclenchée si :

L'utilisation de l'API Topics est explicitement interdite par une politique de permissions browsing-topics, et browsingTopics a la valeur true.
L'utilisation des opérations de l'API Private State Token est explicitement interdite par une politique de permissions private-state-token-issuance ou private-state-token-redemption, et l'option privateToken est définie, y compris un type privateToken.operation non autorisé.

TypeError

Peut survenir pour les raisons suivantes :

L'URL demandée est invalide.
L'URL demandée inclut des identifiants (nom d'utilisateur·ice 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é).
L'option d'initialisation privateToken est utilisée, y compris un type privateToken.operation égal à send-redemption-record, et le tableau privateToken.issues était vide ou non présent, ou un ou plusieurs des issuers définis ne sont pas des URL HTTPS de confiance.

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>.

js
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 :

js
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 :

js
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().

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 16 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu