WindowOrWorkerGlobalScope.fetch()

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

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

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

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

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

Синтаксис

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

Аргументы

input
Определяет желаемый для получения ресурс. Это может быть:
  • USVString (строка), содержащая прямую URL ссылку на ресурс. Некоторые браузеры принимают blob: и data: , как схемы.
  • Request объект (объект ответа).
init Необязательный
Объект с опциями, содержащий пользовательские настройки, которые вы желаете применить к запросу. Возможные варианты:
  • method: Метод запроса, например, GET, POST.
  • headers: Заголовки, содержащиеся в объекте Headers (en-US) или в объекте литерале с побитовыми значениями (ByteString).
  • body: Тело запроса, которое может быть: Blob, BufferSource (en-US), FormData, URLSearchParams, или USVString объектами. Обратите внимание, что GET или HEAD запрос не может иметь тела.
  • mode: Режим, например, cors, no-cors или same-origin.
  • credentials: Полномочия: omit, same-origin или include. Для автоматической отправки куки для текущего домена, эта опция должна быть указана. Начиная с Chrome 50, это свойство также принимает экземпляр класса FederatedCredential (en-US) или  PasswordCredential (en-US).
  • 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 (en-US), содержащий 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() (en-US), после чего создаём для него 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 (en-US) или PasswordCredential (en-US) как возможное значение для init.credentials.

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

BCD tables only load in the browser

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