diff options
author | MDN <actions@users.noreply.github.com> | 2021-09-01 00:52:00 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-09-01 00:52:00 +0000 |
commit | af3288b106f44aaaa2c80d499ec669383d6f7203 (patch) | |
tree | 6d5a402249e4e8a83820c2592887062ec9202d79 /files/ru/web/api/fetch | |
parent | 1768b43f574673545e1f2a20e92a27b050a2bb53 (diff) | |
download | translated-content-af3288b106f44aaaa2c80d499ec669383d6f7203.tar.gz translated-content-af3288b106f44aaaa2c80d499ec669383d6f7203.tar.bz2 translated-content-af3288b106f44aaaa2c80d499ec669383d6f7203.zip |
[CRON] sync translated content
Diffstat (limited to 'files/ru/web/api/fetch')
-rw-r--r-- | files/ru/web/api/fetch/index.html | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/files/ru/web/api/fetch/index.html b/files/ru/web/api/fetch/index.html new file mode 100644 index 0000000000..788b9c3f69 --- /dev/null +++ b/files/ru/web/api/fetch/index.html @@ -0,0 +1,169 @@ +--- +title: WindowOrWorkerGlobalScope.fetch() +slug: Web/API/fetch +tags: + - Справка + - запрос + - метод +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +original_slug: Web/API/WindowOrWorkerGlobalScope/fetch +--- +<div>{{APIRef("Fetch API")}}</div> + +<p>Метод <code><strong>fetch()</strong></code> , относящийся к миксину {{domxref("WindowOrWorkerGlobalScope")}}, запускает процесс извлечения ресурса из сети. Возвращает promise, содержащий {{domxref("Response")}} объект (ответ на запрос).</p> + +<p><code>WorkerOrGlobalScope</code> относится к {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}} сразу. Это означает, что метод <code>fetch()</code> доступен практически в любом контексте, в котором бы вы не захотели получить ресурсы.</p> + +<p>Промис {{domxref("WindowOrWorkerGlobalScope.fetch","Fetch()")}} завершается {{jsxref("TypeError")}}, если возникает сетевая ошибка, хотя обычно это означает проблему с доступами или аналогичную ей. Для успешного завершения <code>fetch()</code> достаточно удостовериться в том, что промис выполнен и что свойство {{domxref("Response.ok")}} имеет значение <code>true</code>. HTTP статус 404 не является сетевой ошибкой.</p> + +<p>Метод <code>fetch()</code> контролируется директивой <code>connect-src</code> directive of <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> (политика безопасности контента), а не директивой ресурсов, которые извлекает.</p> + +<div class="note"> +<p><strong>На Заметку</strong>: Аргументы метода <code>fetch()</code> идентичны аргументам {{domxref("Request.Request","Request()")}} конструктора.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">Promise<Response> fetch(input[, init]);</pre> + +<h3 id="Аргументы">Аргументы</h3> + +<dl> + <dt><em>input</em></dt> + <dd>Определяет желаемый для получения ресурс. Это может быть: + <ul> + <li>{{domxref("USVString")}} (строка), содержащая прямую URL ссылку на ресурс. Некоторые браузеры принимают <code>blob:</code> и <code>data:</code> , как схемы.</li> + <li>{{domxref("Request")}} объект (объект ответа).</li> + </ul> + </dd> + <dt><em>init</em> {{optional_inline}}</dt> + <dd>Объект с опциями, содержащий пользовательские настройки, которые вы желаете применить к запросу. Возможные варианты: + <ul> + <li><code>method</code>: Метод запроса, например, <code>GET</code>, <code>POST</code>.</li> + <li><code>headers</code>: Заголовки, содержащиеся в объекте {{domxref("Headers")}} или в объекте литерале с побитовыми значениями ({{domxref("ByteString")}}).</li> + <li><code>body</code>: Тело запроса, которое может быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, или {{domxref("USVString")}} объектами. Обратите внимание, что <code>GET</code> или <code>HEAD</code> запрос не может иметь тела.</li> + <li><code>mode</code>: Режим, например, <code>cors</code>, <code>no-cors</code> или <code>same-origin</code>.</li> + <li><code>credentials</code>: Полномочия: <code>omit</code>, <code>same-origin</code> или <code>include</code>. Для автоматической отправки куки для текущего домена, эта опция должна быть указана. Начиная с Chrome 50, это свойство также принимает экземпляр класса {{domxref("FederatedCredential")}} или {{domxref("PasswordCredential")}}.</li> + <li><code>cache</code>: Режим кеширования запроса <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code> или <code>only-if-cached</code>.</li> + <li><code>redirect</code>: Режим редиректа: <code>follow</code> (автоматически переадресовывать), <code>error</code> (прерывать перенаправление ошибкой) или <code>manual</code> (управлять перенаправлениями вручную). В Chrome по дефолту стоит <code>follow</code> (ранее, в Chrome 47, стояло <code>manual</code>).</li> + <li><code>referrer</code>: {{domxref("USVString")}}, определяющая <code>no-referrer</code>, <code>client</code> или a URL. Дефолтное значение - <code>client</code>.</li> + <li><code>referrerPolicy</code>: Определяет значение HTTP заголовка реферера. Может быть: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li> + <li><code>integrity</code>: Содержит значение целостности субресурсов (<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>) запроса (например, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li> + <li><code>keepalive</code>: Эта опция может быть использована, чтобы разрешить запросу "пережить" страницу. Получение ресурсов с флагом <code>keepalive</code> - это альтернатива {{domxref("Navigator.sendBeacon()")}} API. </li> + <li><code>signal</code>: Экземпляр объекта {{domxref("AbortSignal")}}; позволяет коммуницировать с fetch запросом и, если нужно, отменять его с помощью {{domxref("AbortController")}}.</li> + </ul> + </dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p>{{domxref("Promise")}}, содержащий {{domxref("Response")}} объект (ответ на запрос).</p> + +<h3 id="Исключения">Исключения</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><strong>Тип</strong></th> + <th scope="col"><strong>Описание</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>AbortError</code></td> + <td>Запрос был отменён (используя {{domxref("AbortController.abort()")}}).</td> + </tr> + <tr> + <td><code>TypeError</code></td> + <td>Начиная с версии <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> завершится ошибкой <code>TypeError</code>, если URL имеет такие полномочия, как <code>http://user:password@example.com</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) мы создаём новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом <code>fetch()</code>. Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаём для него Object URL и передаём её в элемент {{htmlelement("img")}}.</p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest).then(function(response) { + return response.blob(); +}).then(function(response) { + var objectURL = URL.createObjectURL(response); + myImage.src = objectURL; +});</pre> + +<p>В нашем <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) мы делаем тоже самое, за исключением того, что передаём в качестве аргумента для <code>fetch()</code> объект init:</p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myHeaders = new Headers(); +myHeaders.append('Content-Type', 'image/jpeg'); + +var myInit = { method: 'GET', + headers: myHeaders, + mode: 'cors', + cache: 'default' }; + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest,myInit).then(function(response) { + ... +});</pre> + +<p>Обратите внимание, что объект init в качестве аргумента можно передать и в конструктор <code>Request</code> для получения аналогичного результата, например:</p> + +<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre> + +<p>Допустимо использования объекта литерала в качестве <code>headers</code> в <code>init</code>.</p> + +<pre class="brush: js">var myInit = { method: 'GET', + headers: { + 'Content-Type': 'image/jpeg' + }, + mode: 'cors', + cache: 'default' }; + +var myRequest = new Request('flowers.jpg', myInit); +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Частично определена в новейшей спецификации <code>WindowOrWorkerGlobalScope</code>.</td> + </tr> + <tr> + <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>Первоначальное определение</td> + </tr> + <tr> + <td>{{SpecName('Credential Management')}}</td> + <td>{{Spec2('Credential Management')}}</td> + <td>Добавлена возможность установить экземпляр класса {{domxref("FederatedCredential")}} или {{domxref("PasswordCredential")}} как возможное значение для <code>init.credentials</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> +<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> + <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> |