--- title: WindowOrWorkerGlobalScope.fetch() slug: Web/API/fetch tags: - Справка - запрос - метод translation_of: Web/API/WindowOrWorkerGlobalScope/fetch original_slug: Web/API/WindowOrWorkerGlobalScope/fetch ---
{{APIRef("Fetch API")}}

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

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

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

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

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

Синтаксис

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

Аргументы

input
Определяет желаемый для получения ресурс. Это может быть:
init {{optional_inline}}
Объект с опциями, содержащий пользовательские настройки, которые вы желаете применить к запросу. Возможные варианты:

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

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

Исключения

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

Пример

В нашем Fetch Request примере (см. Fetch Request live) мы создаём новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом fetch(). Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаём для него Object URL и передаём её в элемент {{htmlelement("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);

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

{{Specifications}}

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

{{Compat}}

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