aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/request/index.html
blob: a17540856e22e135aab5a0332c36b3aaa433e387 (plain)
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
172
173
174
175
---
title: Request
slug: Web/API/Request
tags:
  - API
  - Fetch
  - Fetch API
  - Interface
  - NeedsTranslation
  - Networking
  - Reference
  - TopicStub
  - request
translation_of: Web/API/Request
---
<div>{{APIRef("Fetch")}}</div>

<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Интерфейс </span></font><strong>Request</strong></code> из <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> является запросом ресурсов или данных.</p>

<p>Создать новый объект <code>Request</code> можно, используя конструктор {{domxref("Request.Request","Request()")}}, однако чаще всего встречается способ возврата объекта <code>Request</code> , как результат операции API. Например такой как service worker {{domxref("FetchEvent.request")}}.</p>

<h2 id="Конструктор">Конструктор</h2>

<dl>
 <dt>{{domxref("Request.Request","Request()")}}</dt>
 <dd>Создаёт новый <code>Request</code> объект.</dd>
</dl>

<h2 id="Параметры">Параметры</h2>

<dl>
 <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
 <dd>Содержит кэшированное состояние запроса (напр., <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
 <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
 <dd>Содержит контекст запроса (напр., <code>audio</code>, <code>image</code>, <code>iframe</code>, и т.д..)</dd>
 <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
 <dd>Содержит данные идентификации запроса (напр., <code>"omit"</code>, <code>"same-origin"</code>, <code>"include"</code>). Значение по умолчанию: <code>"same-origin"</code>.</dd>
 <dt>{{domxref("Request.destination")}} {{ReadOnlyInline}}</dt>
 <dd>Возвращает строку из {{domxref("RequestDestination")}} enum, описывая назначение запроса. Это строка, указывающая тип запрошенных данных.</dd>
 <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
 <dd>Содержит назначенный {{domxref("Headers")}} объект запроса (заголовки).</dd>
 <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
 <dd>Содержит "<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>" значение запроса (напр., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
 <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
 <dd>Содержит метод запроса (<code>GET</code>, <code>POST</code>, и т.д.)</dd>
 <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
 <dd>Содержит режим запроса (напр., <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd>
 <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
 <dd>Содержит режим перенаправления. Может быть одним из следующих: <code>follow</code>, <code>error</code>, или <code>manual</code>.</dd>
 <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
 <dd>Содержит значение "referrer" ("ссылающийся") запроса (например., <code>client</code>).</dd>
 <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
 <dd>Содержит политику "ссылающегося" данного запроса (e.g., <code>no-referrer</code>).</dd>
 <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
 <dd>Содержит URL запроса.</dd>
</dl>

<p><code>Request</code> имплементирует {{domxref("Body")}}, таким образом наследуя следующие параметры:</p>

<dl>
 <dt>{{domxref("Body.body", "body")}} {{readonlyInline}}</dt>
 <dd>Простой getter используемый для раскрытия {{domxref("ReadableStream")}} "тела" (body) содержимого.</dd>
 <dt>{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}</dt>
 <dd>Хранит {{domxref("Boolean")}}, декларирующее использовалось ли "тело" ранее в ответе.</dd>
</dl>

<h2 id="Методы">Методы</h2>

<dl>
 <dt>{{domxref("Request.clone()")}}</dt>
 <dd>Создаёт копию текущего <code>Request</code> объекта.</dd>
</dl>

<p><code>Request</code> имплементирует {{domxref("Body")}}, таким образом наследуя следующие параметры:</p>

<dl>
 <dt>{{domxref("Body.arrayBuffer()")}}</dt>
 <dd>Возвращает promise ("обещание") которое выполняется, возвращая {{domxref("ArrayBuffer")}} репрезентацию тела запроса.</dd>
 <dt>{{domxref("Body.blob()")}}</dt>
 <dd>Возвращает promise </dd>
 <dt>{{domxref("Body.formData()")}}</dt>
 <dd>Возвращает promise который разрешается с помощью {{domxref("FormData")}} представления тела запроса.</dd>
 <dt>{{domxref("Body.json()")}}</dt>
 <dd>Returns a promise that resolves with a {{domxref("JSON")}} representation of the request body.</dd>
 <dt>{{domxref("Body.text()")}}</dt>
 <dd>Returns a promise that resolves with an {{domxref("USVString")}} (text) representation of the request body.</dd>
</dl>

<div class="note">
<p><strong>Note</strong>: The {{domxref("Body")}} functions can be run only once; subsequent calls will resolve with empty strings/ArrayBuffers.</p>
</div>

<h2 id="Examples">Examples</h2>

<p>In the following snippet, we create a new request using the <code>Request()</code> constructor (for an image file in the same directory as the script), then return some property values of the request:</p>

<pre class="brush: js notranslate">const request = new Request('https://www.mozilla.org/favicon.ico');

const URL = request.url;
const method = request.method;
const credentials = request.credentials;
</pre>

<p>You could then fetch this request by passing the <code>Request</code> object in as a parameter to a {{domxref("WindowOrWorkerGlobalScope.fetch()")}} call, for example:</p>

<pre class="brush: js notranslate">fetch(request)
  .then(response =&gt; response.blob())
  .then(blob =&gt; {
    image.src = URL.createObjectURL(blob);
  });</pre>

<p>In the following snippet, we create a new request using the <code>Request()</code> constructor with some initial data and body content for an api request which need a body payload:</p>

<pre class="brush: js notranslate">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>Примечание:</strong> Типом тела может быть только {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} или {{domxref("ReadableStream")}} поэтому, для добавления объекта JSON в полезную нагрузку вам необходимо структурировать этот объект.</p>
</div>



<p>Вы можете получить этот запрос API, передав объект Request в качестве параметра для вызова {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, например, и получить ответ:</p>

<pre class="brush: js notranslate">fetch(request)
  .then(response =&gt; {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Что-то пошло не так на API сервере.');
    }
  })
  .then(response =&gt; {
    console.debug(response);
    // ...
  }).catch(error =&gt; {
    console.error(error);
  });</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Fetch','#request-class','Request')}}</td>
   <td>{{Spec2('Fetch')}}</td>
   <td>Начальное<br>
    определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.Request")}}</p>

<h2 id="Читай_также">Читай также</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>