Request

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

Vous pouvez créer un nouvel objet Request en utilisant le constructeur Request(), mais vous êtes plus susceptible de rencontrer un objet Request renvoyé à la suite d'une autre opération d'API, telle en tant que service worker FetchEvent.request (en-US).

Request()

Crée un nouvel objet Request.

Request.cache (en-US) Lecture seule

Contient le mode de cache de la demande (par exemple, default, reload, no-cache).

Request.context (en-US) Lecture seule

Contient le contexte de la demande (par exemple, audio, image, iframe, etc.)

Request.credentials Lecture seule

Contient les informations d'identification de la demande (par exemple, omit, same-origin, include). La valeur par défaut est same-origin.

Request.destination (en-US) Lecture seule

Renvoie une chaîne de l'énumération RequestDestination (en-US) décrivant la destination de la requête. Il s'agit d'une chaîne indiquant le type de contenu demandé.

Request.headers (en-US) Lecture seule

Contient l'objet Headers associé de la requête.

Request.integrity (en-US) Lecture seule

Contient la valeur d'intégrité de la sous-ressource de la demande (par exemple, sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

Request.method (en-US) Lecture seule

Contient la méthode de la requête (GET, POST, etc).

Request.mode Lecture seule

Contient le mode de la demande (par exemple, cors, no-cors, same-origin, navigate.)

Request.redirect (en-US) Lecture seule

Contient le mode de gestion des redirections. Il peut s'agir d'un follow, error, ou d'un manual.

Request.referrer (en-US) Lecture seule

Contient le référent de la demande (par exemple, client).

Request.referrerPolicy (en-US) Lecture seule

Contient la politique de référent de la demande (par exemple, no-referrer).

Request.url (en-US) Lecture seule

Contient l'URL de la demande.

Request implémente Body, donc il hérite également des propriétés suivantes:

body (en-US) Lecture seule

Un getter simple utilisé pour exposer un ReadableStream (en-US) du contenu du corps.

bodyUsed (en-US) Lecture seule

Stocke un Boolean (en-US) qui déclare si le corps a déjà été utilisé dans une réponse.

Request.clone() (en-US)

Crée une copie de l'objet Request actuel.

Request implémente Body, donc il dispose également des méthodes suivantes:

Body.arrayBuffer() (en-US)

Renvoie une promesse qui se résout avec une représentation ArrayBuffer du corps de la requête.

Body.blob() (en-US)

Renvoie une promesse qui se résout avec une représentation Blob du corps de la requête.

Body.formData() (en-US)

Renvoie une promesse qui se résout avec une représentation FormData du corps de la requếte.

Body.json()

Renvoie une promesse qui se résout avec une représentation JSON du corps de la requête.

Body.text() (en-US)

Renvoie une promesse qui se résout avec une représentation USVString (texte) du coprs de la requête.

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 renvoyons 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 tant que paramètre à un appel WindowOrWorkerGlobalScope.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 du body pour une requête api qui nécessite une charge utile de body:

const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});

const URL = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;

Vous pouvez ensuite récupérer cette demande d'API en passant l'objet Request en tant que paramètre à un appel WindowOrWorkerGlobalScope.fetch(), par exemple et obtenir la réponse:

fetch(request)
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Something went wrong on api server!');
    }
  })
  .then(response => {
    console.debug(response);
    // ...
  }).catch(error => {
    console.error(error);
  });

• ServiceWorker API
• HTTP access control (CORS)
• HTTP