Метод fetch() объекта Window

Метод fetch() интерфейса Window запускает процесс получения ресурса из сети, возвращая промис, который выполняется после получения ответа.

Промис разрешается объектом Response, представляющим ответ на ваш запрос.

Промис fetch() отклоняется только в случае ошибки запроса, например, из-за неправильно сформированного URL запроса или ошибки сети. Промис fetch() не отклоняется, если сервер отвечает кодами HTTP-статуса, указывающими на ошибки (404, 504, и т. д.). Вместо этого обработчик then() должен проверить свойства Response.ok и/или Response.status.

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

resource

Определяет ресурс, который требуется получить. Это может быть:

• Строка или любой другой объект со строковым преобразованием — включая объект URL — который предоставляет URL ресурса, который необходимо получить. URL может быть относительным к базовому URL, который является baseURI в контексте окна или WorkerGlobalScope.location в контексте работника.
• Объект Request.

options Необязательно

Объект RequestInit содержащий любые пользовательские настройки, которые нужно применить к запросу.

Промис Promise, который разрешается объектом Response.

AbortError DOMException

Запрос был прерван из-за вызова метода AbortController abort().

NotAllowedError DOMException

Выбрасывается, если использование API тем (Topics API) запрещено политикой browsing-topics политики разрешений (Permissions Policy), и был сделан запрос fetch() с параметром browsingTopics: true.

TypeError

Может возникнуть по следующим причинам:

// space in "C ontent-Type"
const headers = {
  'C ontent-Type': 'text/xml',
  'Breaking-Bad': '<3',
};
fetch('https://example.com/', { headers });
        

const headers = [
  ['Content-Type', 'text/html', 'extra'],
  ['Accept'],
];
fetch('https://example.com/', { headers });
        

fetch('blob://example.com/', { mode: 'cors' });
        

fetch('https://user:password@example.com/');
        

fetch('https://example.com/', { referrer: './abc\u0000df' });
        

fetch('https://example.com/', { mode: 'navigate' });
        

fetch('https://example.com/', {
  cache: 'only-if-cached',
  mode: 'no-cors',
});
        

fetch('https://example.com/', { method: 'CONNECT' });
        

fetch('https://example.com/', {
  method: 'CONNECT',
  mode: 'no-cors',
});
        

fetch('https://example.com/', {
  method: 'GET',
  body: new FormData(),
});
        

В нашем примере с запросом Fetch (см. живой пример запроса Fetch) мы создаём новый объект Request с помощью соответствующего конструктора, а затем получаем его с помощью вызова fetch(). Поскольку мы получаем изображение, мы применяем метод Response.blob() к ответу, чтобы установить правильный тип MIME, а затем создаём URL объекта и отображаем его в элементе <img>.

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

window
  .fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

В нашем примере запроса Fetch с параметрами (см. живой пример запроса Fetch с параметрами) мы делаем то же самое, но передаём объект options при вызове fetch(). В этом случае мы можем установить значение Cache-Control, чтобы указать, какие кэшированные ответы нам подходят:

const myImage = document.querySelector("img");
const reqHeaders = new Headers();

// A cached response is okay unless it's more than a week old
reqHeaders.set("Cache-Control", "max-age=604800");

const options = {
  headers: reqHeaders,
};

// Pass init as an "options" object with our headers.
const req = new Request("flowers.jpg", options);

fetch(req).then((response) => {
  // ...
});

Также можно передать объект init вместе с конструктором Request для достижения того же эффекта:

const req = new Request("flowers.jpg", options);

Также можно использовать объект-литерал как headers в вызове init:

const options = {
  headers: {
    "Cache-Control": "max-age=60480",
  },
};

const req = new Request("flowers.jpg", options);

• WorkerGlobalScope.fetch()
• Fetch API
• ServiceWorker API
• Контроль доступа по HTTP (CORS)
• HTTP