Request - Les API Web

Request - Les API Web | MDN

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 les Web Workers.

L'interface Request de l'API Fetch représente une demande de ressource.

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

Constructeur

Request(): Crée un nouvel objet Request.

Propriétés d'instance

Request.body Lecture seule: Un objet ReadableStream du contenu du corps.
Request.bodyUsed Lecture seule: Stocke true ou false pour indiquer si le corps a déjà été utilisé dans une requête.
Request.cache Lecture seule: Contient le mode de cache de la requête (par exemple : default, reload, no-cache).
Request.credentials Lecture 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 est same-origin.
Request.destination Lecture seule: Une chaîne de caractères décrivant le type de contenu demandé.
Request.duplex Lecture seule Expé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.headers Lecture seule: Contient l'objet Headers associé à la requête.
Request.integrity Lecture seule: Contient la valeur d'intégrité de la sous-ressource de la requête (par exemple : sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
Request.isHistoryNavigation Lecture seule: Un booléen indiquant si la requête est une navigation dans l'historique.
Request.keepalive Lecture seule: Contient le paramètre keepalive de la requête (true ou false), 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.method Lecture seule: Contient la méthode de la requête (GET, POST, etc.).
Request.mode Lecture seule: Contient le mode de la requête (par exemple : cors, no-cors, same-origin, navigate).
Request.redirect Lecture seule: Contient le mode de gestion des redirections. Il peut s'agir de follow, error ou manual.
Request.referrer Lecture seule: Contient le référent de la requête (par exemple : client).
Request.referrerPolicy Lecture seule: Contient la politique de référent de la requête (par exemple : no-referrer).
Request.signal Lecture seule: Retourne le signal AbortSignal associé à la requête.
Request.url Lecture seule: Contient l'URL de la requête.

Méthodes d'instance

Request.arrayBuffer(): Retourne une promesse qui se résout avec une représentation ArrayBuffer du corps de la requête.
Request.blob(): Retourne une promesse qui se résout avec une représentation Blob du corps de la requête.
Request.bytes(): Retourne une promesse qui se résout avec une représentation Uint8Array du corps de la requête.
Request.clone(): Crée une copie de l'objet Request actuel.
Request.formData(): Retourne une promesse qui se résout avec une représentation FormData 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 que JSON.
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 constructeur Request() (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'objet Request en paramètre à un appel fetch(), 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 constructeur Request() 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 objet Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, ReadableStream, ou un objet String, 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'objet Request en paramètre à un appel fetch(), 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);
  });

Spécifications

Specification
Fetch # request-class

Constructeur

Propriétés d'instance

Méthodes d'instance

Exemples

Spécifications

Compatibilité des navigateurs

Voir aussi

Help improve MDN