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- 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 estsame-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'unmanual
. 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:
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;
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 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);
});
Spécifications
Spécification | Statut | Commentaire |
---|---|---|
Fetch La définition de 'Request' dans cette spécification. |
Standard évolutif | Définition initiale |
Compatibilité des navigateurs
BCD tables only load in the browser