Метод 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.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержка
Экспериментальная
Chrome Полная поддержка 42Edge Полная поддержка 14Firefox Полная поддержка 39
Полная поддержка 39
Полная поддержка 34
Отключено
Отключено From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
Полная поддержка 52
Замечания
Замечания fetch() now defined on WindowOrWorkerGlobalScope mixin.
IE Нет поддержки НетOpera Полная поддержка 29
Полная поддержка 29
Полная поддержка 28
Отключено
Отключено From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari Полная поддержка 10WebView Android Полная поддержка 42Chrome Android Полная поддержка 42Edge Mobile Полная поддержка 14Firefox Android Полная поддержка 39
Полная поддержка 39
Полная поддержка 34
Отключено
Отключено From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
Полная поддержка 52
Замечания
Замечания fetch() now defined on WindowOrWorkerGlobalScope mixin.
Opera Android ? Safari iOS Полная поддержка 10Samsung Internet Android ?
Streaming response body
Экспериментальная
Chrome Полная поддержка 43Edge Полная поддержка 14Firefox Полная поддержка Да
Отключено
Полная поддержка Да
Отключено
Отключено This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 29Safari Полная поддержка 10WebView Android Полная поддержка 43Chrome Android Полная поддержка 43Edge Mobile Полная поддержка 14Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Полная поддержка 10Samsung Internet Android ?
Support for blob: and data:
Экспериментальная
Chrome Полная поддержка 48Edge Нет поддержки НетFirefox ? IE Нет поддержки НетOpera ? Safari ? WebView Android Полная поддержка 43Chrome Android Полная поддержка 43Edge Mobile Нет поддержки НетFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
referrerPolicyChrome Полная поддержка 52Edge Нет поддержки НетFirefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 39Safari Полная поддержка 11.1WebView Android Полная поддержка 52Chrome Android Полная поддержка 52Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 52Opera Android Полная поддержка 39Safari iOS Нет поддержки НетSamsung Internet Android ?
signal
Экспериментальная
Chrome ? Edge ? Firefox Полная поддержка 57IE Нет поддержки НетOpera ? Safari Нет поддержки НетWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Полная поддержка 57Opera Android ? Safari iOS Нет поддержки НетSamsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

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

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

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