diff options
Diffstat (limited to 'files/fr/web/api/request/index.md')
| -rw-r--r-- | files/fr/web/api/request/index.md | 239 |
1 files changed, 108 insertions, 131 deletions
diff --git a/files/fr/web/api/request/index.md b/files/fr/web/api/request/index.md index cc9160f5c2..847932b31c 100644 --- a/files/fr/web/api/request/index.md +++ b/files/fr/web/api/request/index.md @@ -12,160 +12,137 @@ tags: - request translation_of: Web/API/Request --- -<div>{{APIRef("Fetch API")}}</div> - -<p>L'interface <strong><code>Request</code></strong> de l'<a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> représente une demande de ressource.</p> - -<p>Vous pouvez créer un nouvel objet <code>Request</code> en utilisant le constructeur {{domxref("Request.Request","Request()")}}, mais vous êtes plus susceptible de rencontrer un objet <code>Request</code> renvoyé à la suite d'une autre opération d'API, telle en tant que service worker {{domxref("FetchEvent.request")}}.</p> - -<h2 id="Constructeur">Constructeur</h2> - -<dl> - <dt>{{domxref("Request.Request","Request()")}}</dt> - <dd>Crée un nouvel objet <code>Request</code>.</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<dl> - <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt> - <dd>Contient le mode de cache de la demande (par exemple, <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd> - <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt> - <dd>Contient le contexte de la demande (par exemple, <code>audio</code>, <code>image</code>, <code>iframe</code>, etc.)</dd> - <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt> - <dd>Contient les informations d'identification de la demande (par exemple, <code>omit</code>, <code>same-origin</code>, <code>include</code>). La valeur par défaut est <code>same-origin</code>.</dd> - <dt>{{domxref("Request.destination")}} {{ReadOnlyInline}}</dt> - <dd>Renvoie une chaîne de l'énumération {{domxref("RequestDestination")}} décrivant la destination de la requête. Il s'agit d'une chaîne indiquant le type de contenu demandé.</dd> - <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt> - <dd>Contient l'objet {{domxref("Headers")}} associé de la requête.</dd> - <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt> - <dd>Contient la valeur d'<a href="/en-US/docs/Web/Security/Subresource_Integrity">intégrité de la sous-ressource</a> de la demande (par exemple, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd> - <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt> - <dd>Contient la méthode de la requête (<code>GET</code>, <code>POST</code>, etc).</dd> - <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt> - <dd>Contient le mode de la demande (par exemple, <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd> - <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt> - <dd>Contient le mode de gestion des redirections. Il peut s'agir d'un <code>follow</code>, <code>error</code>, ou d'un <code>manual</code>.</dd> - <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt> - <dd>Contient le référent de la demande (par exemple, <code>client</code>).</dd> - <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt> - <dd>Contient la politique de référent de la demande (par exemple, <code>no-referrer</code>).</dd> - <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt> - <dd>Contient l'URL de la demande.</dd> -</dl> - -<p><code>Request</code> implémente {{domxref("Body")}}, donc il hérite également des propriétés suivantes:</p> - -<dl> - <dt>{{domxref("Body.body", "body")}} {{readonlyInline}}</dt> - <dd>Un getter simple utilisé pour exposer un {{domxref("ReadableStream")}} du contenu du corps.</dd> - <dt>{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}</dt> - <dd>Stocke un {{domxref("Boolean")}} qui déclare si le corps a déjà été utilisé dans une réponse.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<dl> - <dt>{{domxref("Request.clone()")}}</dt> - <dd>Crée une copie de l'objet <code>Request</code> actuel.</dd> -</dl> - -<p><code>Request</code> implémente {{domxref("Body")}}, donc il dispose également des méthodes suivantes:</p> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("ArrayBuffer")}} du corps de la requête.</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("Blob")}} du corps de la requête.</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("FormData")}} du corps de la requếte.</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("JSON")}} du corps de la requête.</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("USVString")}} (texte) du coprs de la requête.</dd> -</dl> - -<div class="note"> -<p><strong>Note :</strong> Les fonctions {{domxref("Body")}} ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.</p> -</div> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur <code>Request()</code> (pour un fichier image dans le même répertoire que le script), puis renvoyons certaines valeurs de propriété de la requête:</p> - -<pre class="brush: js">const request = new Request('https://www.mozilla.org/favicon.ico'); +{{APIRef("Fetch API")}} + +L'interface **`Request`** de l'[API Fetch](/en-US/docs/Web/API/Fetch_API) représente une demande de ressource. + +Vous pouvez créer un nouvel objet `Request` en utilisant le constructeur {{domxref("Request.Request","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 {{domxref("FetchEvent.request")}}. + +## Constructeur + +- {{domxref("Request.Request","Request()")}} + - : Crée un nouvel objet `Request`. + +## Propriétés + +- {{domxref("Request.cache")}} {{readonlyInline}} + - : Contient le mode de cache de la demande (par exemple, `default`, `reload`, `no-cache`). +- {{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}} + - : Contient le contexte de la demande (par exemple, `audio`, `image`, `iframe`, etc.) +- {{domxref("Request.credentials")}} {{readonlyInline}} + - : Contient les informations d'identification de la demande (par exemple, `omit`, `same-origin`, `include`). La valeur par défaut est `same-origin`. +- {{domxref("Request.destination")}} {{ReadOnlyInline}} + - : Renvoie une chaîne de l'énumération {{domxref("RequestDestination")}} décrivant la destination de la requête. Il s'agit d'une chaîne indiquant le type de contenu demandé. +- {{domxref("Request.headers")}} {{readonlyInline}} + - : Contient l'objet {{domxref("Headers")}} associé de la requête. +- {{domxref("Request.integrity")}} {{readonlyInline}} + - : Contient la valeur d'[intégrité de la sous-ressource](/en-US/docs/Web/Security/Subresource_Integrity) de la demande (par exemple, `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`). +- {{domxref("Request.method")}} {{readonlyInline}} + - : Contient la méthode de la requête (`GET`, `POST`, etc). +- {{domxref("Request.mode")}} {{readonlyInline}} + - : Contient le mode de la demande (par exemple, `cors`, `no-cors`, `same-origin`, `navigate`.) +- {{domxref("Request.redirect")}} {{readonlyinline}} + - : Contient le mode de gestion des redirections. Il peut s'agir d'un `follow`, `error`, ou d'un `manual`. +- {{domxref("Request.referrer")}} {{readonlyInline}} + - : Contient le référent de la demande (par exemple, `client`). +- {{domxref("Request.referrerPolicy")}} {{readonlyInline}} + - : Contient la politique de référent de la demande (par exemple, `no-referrer`). +- {{domxref("Request.url")}} {{readonlyInline}} + - : Contient l'URL de la demande. + +`Request` implémente {{domxref("Body")}}, donc il hérite également des propriétés suivantes: + +- {{domxref("Body.body", "body")}} {{readonlyInline}} + - : Un getter simple utilisé pour exposer un {{domxref("ReadableStream")}} du contenu du corps. +- {{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}} + - : Stocke un {{domxref("Boolean")}} qui déclare si le corps a déjà été utilisé dans une réponse. + +## Méthodes + +- {{domxref("Request.clone()")}} + - : Crée une copie de l'objet `Request` actuel. + +`Request` implémente {{domxref("Body")}}, donc il dispose également des méthodes suivantes: + +- {{domxref("Body.arrayBuffer()")}} + - : Renvoie une promesse qui se résout avec une représentation {{domxref("ArrayBuffer")}} du corps de la requête. +- {{domxref("Body.blob()")}} + - : Renvoie une promesse qui se résout avec une représentation {{domxref("Blob")}} du corps de la requête. +- {{domxref("Body.formData()")}} + - : Renvoie une promesse qui se résout avec une représentation {{domxref("FormData")}} du corps de la requếte. +- {{domxref("Body.json()")}} + - : Renvoie une promesse qui se résout avec une représentation {{domxref("JSON")}} du corps de la requête. +- {{domxref("Body.text()")}} + - : Renvoie une promesse qui se résout avec une représentation {{domxref("USVString")}} (texte) du coprs de la requête. + +> **Note :** Les fonctions {{domxref("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; -</pre> +``` -<p>Vous pouvez ensuite récupérer cette requête en passant l'objet <code>Request</code> en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple:</p> +Vous pouvez ensuite récupérer cette requête en passant l'objet `Request` en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple: -<pre class="brush: js">fetch(request) - .then(response => response.blob()) - .then(blob => { +```js +fetch(request) + .then(response => response.blob()) + .then(blob => { image.src = URL.createObjectURL(blob); - });</pre> + }); +``` -<p>Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur <code>Request()</code> avec des données initiales et du contenu du body pour une requête api qui nécessite une charge utile de body:</p> +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: -<pre class="brush: js">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'}); +```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; -</pre> +``` -<div class="note"> -<p><strong>Note:</strong> Le type de body ne peut être qu'un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}} donc pour ajouter un objet JSON à la charge utile, vous devez stringify cet objet.</p> -</div> +> **Note :** Le type de body ne peut être qu'un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}} donc pour ajouter un objet JSON à la charge utile, vous devez stringify cet objet. -<p>Vous pouvez ensuite récupérer cette demande d'API en passant l'objet <code>Request</code> en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple et obtenir la réponse:</p> +Vous pouvez ensuite récupérer cette demande d'API en passant l'objet `Request` en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple et obtenir la réponse: -<pre class="brush: js">fetch(request) - .then(response => { +```js +fetch(request) + .then(response => { if (response.status === 200) { return response.json(); } else { throw new Error('Something went wrong on api server!'); } }) - .then(response => { + .then(response => { console.debug(response); // ... - }).catch(error => { + }).catch(error => { console.error(error); - });</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Fetch','#request-class','Request')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Request")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> + }); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------- | ------------------------ | ------------------- | +| {{SpecName('Fetch','#request-class','Request')}} | {{Spec2('Fetch')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Request")}} + +## Voir aussi + +- [ServiceWorker API](/en-US/docs/Web/API/ServiceWorker_API) +- [HTTP access control (CORS)](/en-US/docs/Web/HTTP/Access_control_CORS) +- [HTTP](/en-US/docs/Web/HTTP) |