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

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

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

Синтаксис

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-referrer,client или 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 объект (ответ на запрос).

Исключения

Пример

В нашем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 API
• ServiceWorker API
• HTTP access control (CORS)
• HTTP