---
title: Fetch API
slug: Web/API/Fetch_API
tags:
  - API
  - Fetch
  - Response
  - XMLHttpRequest
  - request
  - Главная
  - Справка
  - Экспериментальная
translation_of: Web/API/Fetch_API
---
<p>{{DefaultAPISidebar("Fetch API")}}</p>

<p>Fetch API предоставляет интерфейс для получения ресурсов (в том числе по сети). Он покажется знакомым любому, кто использовал {{DOMxRef("XMLHttpRequest")}}, но новый API является более мощным и гибким набором функций.</p>

<h2 id="Определения_и_использование">Определения и использование</h2>

<p>Fetch обеспечивает обобщённое определение объектов {{DOMxRef("Request")}} и {{DOMxRef("Response")}} (и других вещей, связанных с сетевыми запросами). Это позволит им использоваться везде, где необходимо в будущем, в том числе и для service workers, Cache API и других подобных технологий, которые обрабатывают или изменяют запросы (requests) и ответы (responses), а так же в любых других случаях, которые могут потребовать от вас генерировать свой собственный ответ программно.</p>

<p>Это также предоставляет определение в отношение таких понятий, как CORS и семантика заголовков HTTP origin, заменяя их обособленные определения где бы то ни было.</p>

<p>Чтобы создать запрос и получить данные, используется метод {{DOMxRef("GlobalFetch.fetch")}}. Он реализован во множестве интерфейсов, в том числе в {{DOMxRef("Window")}} и {{DOMxRef("WorkerGlobalScope")}}. Это позволяет использовать его практически в любом контексте для получения данных.</p>

<p>Метод <code>fetch()</code> принимает один обязательный аргумент —  путь к данным, которые вы хотите получить. Он возвращает promise, который разрешается в ({{DOMxRef("Response")}}) независимо от того, был ли запрос удачным. Вы можете также передать во втором аргументе необязательный объект с указанием опций (см. {{DOMxRef("Request")}}.)</p>

<p>Как только {{DOMxRef("Response")}} выполнится успешно, становятся доступными несколько методов для определения тела контента и, как его содержимое должно быть обработано (см. {{DOMxRef("Body")}}.)</p>

<p>Вы можете создавать запрос и ответ непосредственно, используя конструкторы {{DOMxRef("Request.Request","Request()")}} и {{DOMxRef("Response.Response","Response()")}}, но маловероятно, что в этом есть необходимость. Напротив, более вероятно, что они будут созданы как результат работы другого API (например, {{DOMxRef("FetchEvent.respondWith")}} в service workers.)</p>

<h3 id="Отличия_от_jQuery">Отличия от jQuery</h3>

<p>Спецификации <code>fetch()</code> отличаются от <code>jQuery.ajax()</code> тремя основными способами:</p>

<ul>
 <li>
  <p>Промис, возвращённый из <code>fetch()</code>, <strong>не будет отвергнут при статусе ошибки HTTP</strong>, даже если ответ является HTTP <code>404</code> или <code>500</code>. Вместо этого, оно будет разрешаться нормально (со статусом <code>ok</code> установленным в <code>false</code>), и будет отклоняться только при сбое в сети или если что-то помешало завершению запроса.</p>
 </li>
 <li>
  <p><code>fetch() </code>может получать межсайтовые куки-файлы; таким образом вы можете установить межсайтовую сессию используя <code>fetch</code>.</p>
 </li>
 <li><code>fetch()</code> не будет посылать куки-файлы, если только не указано <code>credentials: 'same-origin'</code>.</li>
</ul>

<div class="note"><strong>Примечание</strong>: узнайте больше об использовании Fetch API на <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a> и изучите концепции на <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</div>

<h3 id="Прерывание_выборки">Прерывание выборки</h3>

<p>Браузеры начали добавлять экспериментальную поддержку для {{domxref("AbortController")}} и {{domxref("AbortSignal")}} интерфейсов (aka The Abort API), которые позволяют прерывать операции, такие как Fetch и XHR, если они ещё не завершены. Подробности смотрите на страницах интерфейсов.</p>

<h2 id="Fetch_интерфейсы">Fetch интерфейсы</h2>

<dl>
 <dt>{{DOMxRef("GlobalFetch")}}</dt>
 <dd>Содержит метод <code>fetch()</code>, используемый для получения ресурсов.</dd>
 <dt>{{DOMxRef("Headers")}}</dt>
 <dd>Представляет заголовки запроса/ответа, позволяет запрашивать данные и выполнять различные действия в зависимости от результата.</dd>
 <dt>{{DOMxRef("Request")}}</dt>
 <dd>Запрашивает ресурс.</dd>
 <dt>{{DOMxRef("Response")}}</dt>
 <dd>Представляет ответ на запрос.</dd>
</dl>

<h2 id="Fetch_примесь">Fetch примесь</h2>

<dl>
 <dt>{{DOMxRef("Body")}}</dt>
 <dd>Предоставляет методы, относящиеся к телу запроса/ответа, позволяя вам определять content-type и то, как ответ должен быть обработан.</dd>
</dl>

<h2 id="Спецификации">Спецификации</h2>

{{Specifications}}

<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>

<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</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>
 <li><a href="https://github.com/github/fetch">Fetch полифил</a></li>
 <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch базовые понятия</a></li>
</ul>