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