Метод fetch() , относящийся к миксину WindowOrWorkerGlobalScope, запускает процесс извлечения ресурса из сети. Возвращает promise, содержащий Response объект (ответ на запрос).

WorkerOrGlobalScope относится к Window и WorkerGlobalScope сразу. Это означает, что метод fetch() доступен практически в любом контексте, в котором бы вы не захотели получить ресурсы.

Fetch() promise (обещание) завершается TypeError, если возникает сетевая ошибка, хотя обычно это означает проблему с доступами или аналогичную ей. Для успешного завершения fetch() достаточно удостовериться в том, что обещание выполнено и что свойство Response.ok имеет значение true. HTTP статус 404 не является сетевой ошибкой.

Метод fetch() контролируется директивой connect-src directive of Content Security Policy (политика безопасности контента), а не директивой ресурсов, которые извлекает.

На Заметку: Аргументы метода fetch() идентичны аргументам Request() конструктора.

Синатксис

Promise<Response> fetch(input[, init]);

Аргументы

input
Определяет желаемый для получения ресурс. Это может быть:
  • USVString (строка), содержащая прямую URL ссылку на ресурс. Некоторые браузеры принимают blob: и data: , как схемы.
  • Request объект (объект ответа).
init Необязательный
Объект с опциями, содержащий пользовательские настройки, которые вы желаете применить к запросу. Возможные варианты:
  • method: Метод запроса, например, GET, POST.
  • headers: Заголовки, содержащиеся в объекте Headers или в объекте литерале с побитовыми значениями (ByteString).
  • body: Тело запроса, которое может быть: Blob, BufferSource, FormData, URLSearchParams, или USVString объектами. Обратите внимание, что GET или HEAD запрос не может иметь тела.
  • mode: Режим, например, cors, no-cors или same-origin.
  • credentials: Полномочия: omit, same-origin или include. Для автоматической отправки куки для текущего домена, эта опция должна быть указана. Начиная с Chrome 50, это свойство также принимает экземпляр класса FederatedCredential или  PasswordCredential.
  • cache: Режим кэширования запроса default, no-store, reload, no-cache, force-cache или only-if-cached.
  • redirect: Режим редиректа: follow (автоматически переадресовывать), error (прерывать перенаправление ошибкой) или manual (управлять перенаправлениями вручную). В Chrome по дефолту стоит follow (ранее, в Chrome 47, стояло manual).
  • referrer: USVString, определяющая no-referrerclient или a URL. Дефолтное значение - client.
  • referrerPolicy: Определяет значение HTTP заголовка реферера. Может быть: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
  • integrity: Содержит значение целостности субресурсов (subresource integrity) запроса (например, sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
  • keepalive: Эта опция может быть использована, чтобы разрешить запросу "пережить" страницу. Получение ресурсов с флагом keepalive - это альтернатива Navigator.sendBeacon() API. 
  • signal: Экзмепляр объекта AbortSignal; позволяет коммуницировать с fetch запросом и, если нужно, отменять его с помощью AbortController.

Возвращаемое значение

Promise, содержащий Response объект (ответ на запрос).

Исключения

Тип Описание
AbortError Запрос был отменен (используя AbortController.abort()).
TypeError Начиная с версии Firefox 43, fetch() завершится ошибкой TypeError, если URL имеет такие полномочия, как http://user:password@example.com.

Пример

В нашем Fetch Request примере (см. Fetch Request live) мы создаем новый объект Request (запроса), используя релевантный конструктор, а затем получаем его вызовом fetch(). Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод Body.blob(), после чего создаем для него Object URL и передаем ее в элемент <img>.

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;
});

В нашем Fetch with init then Request примере (см. Fetch Request init live) мы делаем тоже самое, за исключением того, что передаем в качестве аргумента для fetch() объект init:

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) {
  ... 
});

Обратите внимание, что объект init в качестве аргумента можно передать и в конструктор Request для получения аналогичного результата, например:

var myRequest = new Request('flowers.jpg', myInit);

Допустимо использования объекта литерала в качестве headers в init.

var myInit = { method: 'GET',
               headers: {
                   'Content-Type': 'image/jpeg'
               },
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);

Спецификации

Спецификация Статус Комментарий
Fetch
Определение 'fetch()' в этой спецификации.
Живой стандарт Частично определена в новейшей спецификации WindowOrWorkerGlobalScope.
Fetch
Определение 'fetch()' в этой спецификации.
Живой стандарт Первоначальное определение
Credential Management Level 1 Рабочий черновик Добавлена возможность установить экземпляр класса FederatedCredential или PasswordCredential как возможное значение для init.credentials.

Совместимость с браузерами

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка4214

39

341

522

Нет

29

283

10
Streaming response body4314 Нет Нет2910
Support for blob: and data:48 Нет ? Нет ? ?
referrerPolicy52 Да ? Нет39 ?
signal ? ?57 Нет ? Нет
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка424214

39

341

522

?10 ?
Streaming response body434314 Нет Нет10 ?
Support for blob: and data:4343 Нет ? ? ? ?
referrerPolicy5252 ? ?39 ? ?
signal ? ? ?57 ? Нет ?

1. From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.

2. fetch() now defined on WindowOrWorkerGlobalScope mixin.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: dasha_hshr
Обновлялась последний раз: dasha_hshr,