diff options
Diffstat (limited to 'files/ru/web/api/request')
| -rw-r--r-- | files/ru/web/api/request/index.html | 175 | ||||
| -rw-r--r-- | files/ru/web/api/request/mode/index.html | 78 |
2 files changed, 253 insertions, 0 deletions
diff --git a/files/ru/web/api/request/index.html b/files/ru/web/api/request/index.html new file mode 100644 index 0000000000..500b80cf55 --- /dev/null +++ b/files/ru/web/api/request/index.html @@ -0,0 +1,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 => response.blob()) + .then(blob => { + 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 => { + if (response.status === 200) { + return response.json(); + } else { + throw new Error('Что-то пошло не так на API сервере.'); + } + }) + .then(response => { + console.debug(response); + // ... + }).catch(error => { + 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> diff --git a/files/ru/web/api/request/mode/index.html b/files/ru/web/api/request/mode/index.html new file mode 100644 index 0000000000..335261f175 --- /dev/null +++ b/files/ru/web/api/request/mode/index.html @@ -0,0 +1,78 @@ +--- +title: Request.mode +slug: Web/API/Request/mode +translation_of: Web/API/Request/mode +--- +<div>{{APIRef("Fetch")}}</div> + +<div></div> + +<p>Read-only свойство <strong><code>mode</code></strong> интерфейса {{domxref("Request")}} описывает режим запроса (например, <code>cors</code>, <code>no-cors</code>, <code>same-origin</code> или <code>navigate</code>.) Используется для проверки, вызывает ли кросс-доменный запрос корректный ответ, и какие свойства ответа доступны для чтения.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>myMode</var> = <var>request</var>.mode;</pre> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt> + <p>Значения <code>RequestMode</code>.</p> + </dt> + <dd> + <p>Соотвествующие доступные значения:</p> + + <ul> + <li><code>same-origin</code> — Если запрос сделан к другому origin в этом режиме, то это вызовет ошибку. Можно использовать этот режим, чтобы проверить, что запрос всегда будет обращён к тому же origin, что и текущий.</li> + <li><code>no-cors</code> — Разрешает использование только <code>HEAD</code>, <code>GET</code> или <code>POST</code> методов и <a href="https://fetch.spec.whatwg.org/#simple-header">простых заголовков</a> (т.е. разрешены только простые запросы). Если какой-либо ServiceWorkers перехватит запрос, то он не сможет добавить или изменить заголовки, кроме <a href="https://fetch.spec.whatwg.org/#simple-header">простых</a>. Также, для JavaScript может быть ограничен доступ к любому свойству объекта ответа {{domxref("Response")}}. Это позволяет наверняка знать, что ServiceWorkers не изменили семантику и <span class="tlid-translation translation" lang="ru"><span title="">предотвратить проблемы безопасности и конфиденциальности, возникающие при утечке данных между доменами</span></span>.</li> + <li><code>cors</code> — Разрешает кросс-доменные запросы. Например, чтобы получить доступ к некому API, предоставляемое третей стороной. Ожидается, что запрос в этом режиме будет придерживаться <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS протокола</a>. В объекте ответа {{domxref("Response")}} доступен <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">ограниченный набор</a> заголовков, но тело доступно для чтения.</li> + <li><code>navigate</code> — Режим, поддерживающий навигацию. Значение <code>navigate</code> предназначено только для использования в HTML навигации. Запрос в этом режиме создаётся только во время навигации между страницами.</li> + </ul> + </dd> +</dl> + +<h4 id="Default_mode">Default mode</h4> + +<p>Запрос может быть создан разными способами и режим запроса<span class="tlid-translation translation" lang="ru"><span title=""> зависит от конкретных средств, с помощью которых он был инициирован</span></span>.</p> + +<p>Например, когда объект <code>Request</code> создаётся с помощью конструктора {{domxref("Request.Request")}}, свойство <code>mode</code> этого <code>Request</code> будет иметь значение <code>cors</code>.</p> + +<p>Однако, запросы созданные не конструктором {{domxref("Request.Request")}}, будут использовать режим <code>no-cors</code>. Например, для встроенных ресурсов, где запрос инициируется из разметки, если отсуствует атрибут <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>, то запрос в большинстве случаев будет выполнен в режиме <code>no-cors</code> — то есть для элементов {{HTMLElement("link")}} или {{HTMLElement("script")}} (кроме использования с модулями), или {{HTMLElement("img")}}, {{HTMLElement("audio")}}, {{HTMLElement("video")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, или {{HTMLElement("iframe")}}.</p> + +<h2 id="Пример">Пример</h2> + +<p>В этой части кода создаётся новый запрос (для взятия файла картинки) через конструктор {{domxref("Request.Request()")}}, затем полученный режим сохраняется в переменной:</p> + +<pre class="brush: js">var myRequest = new Request('flowers.jpg'); +var myMode = myRequest.mode; // вернёт "cors" по умолчанию</pre> + +<h2 id="Спецификации">Спецификации</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','#dom-request-mode', 'mode')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Request.mode")}}</p> + +<h2 id="See_also">See also</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> |