La méthodefetch() de l'interfaceWindow 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'objetResponse représentant la réponse à votre requête.

Une promessefetch() 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 promessefetch()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ésResponse.ok et/ouResponse.status dans le gestionnairethen().

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

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'unstringifier — y compris un objetURL — qui fournit l'URL de la ressource à récupérer. L'URL peut être relative à l'URL de base, qui estbaseURI dans le contexte d'une fenêtre, ouWorkerGlobalScope.location dans un worker.
• Un objetRequest.

optionsFacultatif

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

Valeur de retour

UnePromise qui se résout avec un objetResponse.

Exceptions

AbortErrorDOMException

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

NotAllowedErrorDOMException

Levée si l'utilisation de l'API Topics est explicitement interdite par unepolitique de permissionsbrowsing-topics et qu'une requêtefetch() a été faite avecbrowsingTopics: 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'objetRequestInit passé dansoptions 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 objetRequest à l'aide du constructeur approprié, puis on le récupère avec un appel àfetch(). Comme il s'agit d'une image, on utiliseResponse.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 objetoptions lors de l'appel àfetch(). On peut alors définir une valeurCache-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 semainereqHeaders.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'objetinit au constructeurRequest pour obtenir le même effet :

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

On peut également utiliser un objet littéral commeheaders dansinit :

const options = {  headers: {    "Cache-Control": "max-age=60480",  },};const req = new Request("flowers.jpg", options);

L'articleUtiliser fetch fournit d'autres exemples d'utilisation defetch().

Spécifications

Compatibilité des navigateurs

Voir aussi

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