1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
---
title: Request
slug: Web/API/Request
tags:
- API
- Experimental
- Fetch
- Fetch API
- Interface
- Reference
- TopicStub
- 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');
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>
<pre class="brush: 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>
<pre class="brush: 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>
<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>
<pre class="brush: 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);
});</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>
|
