Request

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

* Some parts of this feature may have varying levels of support.

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.

Constructeur

Request()

Crée un nouvel objet Request.

Propriétés

Request.cache Lecture seule

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

Request.context Lecture seule Obsolète

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 Lecture seule

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

Request.headers Lecture seule

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

Request.integrity Lecture seule

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

Request.method 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 Lecture seule

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

Request.referrer Lecture seule

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

Request.referrerPolicy Lecture seule

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

Request.url Lecture seule

Contient l'URL de la demande.

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

body Lecture seule

Un getter simple utilisé pour exposer un ReadableStream du contenu du corps.

bodyUsed Lecture seule

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

Méthodes

Request.clone()

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

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

Body.arrayBuffer()

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

Body.blob()

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

Body.formData()

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()

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

Note : Les fonctions Body ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.

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 renvoyons certaines valeurs de propriété de la requête:

js
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 fetch(), par exemple:

js
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:

js
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;

Note : Le type de body ne peut être qu'un Blob, BufferSource, FormData, URLSearchParams, USVString ou ReadableStream donc pour ajouter un objet JSON à la charge utile, vous devez stringify cet objet.

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

js
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);
  });

Spécifications

Specification
Fetch
# request-class

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Request
Request() constructor
cross-origin referrer stripped out and navigate mode converted to same-origin when constructor created from existing Request object.
init.attributionReporting parameter
Experimental
init.browsingTopics parameter
ExperimentalNon-standard
init.duplex parameter
Experimental
init.keepalive parameter
init.priority parameter
init.referrer parameter
Send ReadableStream in request body
Experimental
Consume ReadableStream as a response body
arrayBuffer
blob
body
bodyUsed
bytes
cache
cache.only-if-cached
clone
credentials
Default value same-origin
destination
duplex
Experimental
formData
headers
integrity
isHistoryNavigation
json
keepalive
method
mode
navigate mode
redirect
referrer
referrerPolicy
signal
targetAddressSpace
Experimental
text
url

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

Voir aussi