aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/fetch
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2021-09-01 00:52:00 +0000
committerMDN <actions@users.noreply.github.com>2021-09-01 00:52:00 +0000
commitaf3288b106f44aaaa2c80d499ec669383d6f7203 (patch)
tree6d5a402249e4e8a83820c2592887062ec9202d79 /files/ru/web/api/fetch
parent1768b43f574673545e1f2a20e92a27b050a2bb53 (diff)
downloadtranslated-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.html169
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&lt;Response&gt; 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>