Request

Baseline Widely available *

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.

Note : Cette fonctionnalité est disponible via lesWeb Workers.

L'interfaceRequest del'API Fetch représente une demande de ressource.

Vous pouvez créer un nouvel objetRequest à l'aide du constructeurRequest(), mais il est plus courant de rencontrer un objetRequest retourné à la suite d'une opération d'une autre API, comme un service workerFetchEvent.request.

Constructeur

Request(): Crée un nouvel objetRequest.

Propriétés d'instance

Request.bodyLecture seule: Un objetReadableStream du contenu du corps.
Request.bodyUsedLecture seule: Stocketrue oufalse pour indiquer si le corps a déjà été utilisé dans une requête.
Request.cacheLecture seule: Contient le mode de cache de la requête (par exemple :default,reload,no-cache).
Request.credentialsLecture seule: Contient une valeur contrôlant si les identifiants doivent être inclus dans la requête (par exemple :omit,same-origin,include). La valeur par défaut estsame-origin.
Request.destinationLecture seule: Une chaîne de caractères décrivant le type de contenu demandé.
Request.duplexLecture seuleExpérimental: Le mode duplex de la requête, qui détermine si le navigateur doit envoyer la requête entière avant de traiter la réponse.
Request.headersLecture seule: Contient l'objetHeaders associé à la requête.
Request.integrityLecture seule: Contient la valeurd'intégrité de la sous-ressource de la requête (par exemple :sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
Request.isHistoryNavigationLecture seule: Un booléen indiquant si la requête est une navigation dans l'historique.
Request.keepaliveLecture seule: Contient le paramètrekeepalive de la requête (true oufalse), qui indique si le navigateur gardera la requête associée active si la page qui l'a initiée est déchargée avant la fin de la requête.
Request.methodLecture seule: Contient la méthode de la requête (GET,POST, etc.).
Request.modeLecture seule: Contient le mode de la requête (par exemple :cors,no-cors,same-origin,navigate).
Request.redirectLecture seule: Contient le mode de gestion des redirections. Il peut s'agir defollow,error oumanual.
Request.referrerLecture seule: Contient le référent de la requête (par exemple :client).
Request.referrerPolicyLecture seule: Contient la politique de référent de la requête (par exemple :no-referrer).
Request.signalLecture seule: Retourne le signalAbortSignal associé à la requête.
Request.urlLecture seule: Contient l'URL de la requête.

Méthodes d'instance

Request.arrayBuffer(): Retourne une promesse qui se résout avec une représentationArrayBuffer du corps de la requête.
Request.blob(): Retourne une promesse qui se résout avec une représentationBlob du corps de la requête.
Request.bytes(): Retourne une promesse qui se résout avec une représentationUint8Array du corps de la requête.
Request.clone(): Crée une copie de l'objetRequest actuel.
Request.formData(): Retourne une promesse qui se résout avec une représentationFormData du corps de la requête.
Request.json(): Retourne une promesse qui se résout avec le résultat de l'analyse du corps de la requête en tant queJSON.
Request.text(): Retourne une promesse qui se résout avec une représentation texte du corps de la requête.

Note :Les fonctions du corps de la requête ne peuvent être exécutées qu'une seule fois ; les appels suivants seront rejetés avec un TypeError indiquant que le flux du corps a déjà été utilisé.

Exemples

Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeurRequest() (pour un fichier image dans le même répertoire que le script), puis nous retournons certaines valeurs de propriété de la requête :

const request = new Request("https://www.mozilla.org/favicon.ico");const url = request.url;const method = request.method;const credentials = request.credentials;

Vous pouvez ensuite récupérer cette requête en passant l'objetRequest en paramètre à un appelfetch(), par exemple :

fetch(request)  .then((response) => response.blob())  .then((blob) => {    image.src = URL.createObjectURL(blob);  });

Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeurRequest() avec des données initiales et du contenu de corps pour une requête API qui nécessite une charge utile de corps :

const request = new Request("https://exemple.com", {  method: "POST",  body: '{"toto": "tata"}',});const url = request.url;const method = request.method;const credentials = request.credentials;const bodyUsed = request.bodyUsed;

Note :Le corps ne peut être qu'un objetBlob,ArrayBuffer,TypedArray,DataView,FormData,URLSearchParams,ReadableStream, ou un objetString, ainsi qu'une chaîne de caractères littérale, donc pour ajouter un objet JSON à la charge utile, vous devez transformer cet objet en chaîne de caractères.

Vous pouvez ensuite effectuer cette requête API en passant l'objetRequest en paramètre à un appelfetch(), par exemple, et obtenir la réponse :

fetch(request)  .then((response) => {    if (response.status !== 200) {      throw new Error("Quelque chose s'est mal passé sur le serveur API !");    }    return response.json();  })  .then((response) => {    console.debug(response);    // …  })  .catch((error) => {    console.error(error);  });