Глобальная функция fetch()

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