Fetch API

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

* Some parts of this feature may have varying levels of support.

Fetch API предоставляет интерфейс для получения ресурсов (в том числе по сети). Он покажется знакомым любому, кто использовал XMLHttpRequest, но новый API является более мощным и гибким набором функций.

Определения и использование

Fetch обеспечивает обобщённое определение объектов Request и Response (и других вещей, связанных с сетевыми запросами). Это позволит им использоваться везде, где необходимо в будущем, в том числе и для service workers, Cache API и других подобных технологий, которые обрабатывают или изменяют запросы (requests) и ответы (responses), а так же в любых других случаях, которые могут потребовать от вас генерировать свой собственный ответ программно.

Это также предоставляет определение в отношение таких понятий, как CORS и семантика заголовков HTTP origin, заменяя их обособленные определения где бы то ни было.

Чтобы создать запрос и получить данные, используется метод GlobalFetch.fetch. Он реализован во множестве интерфейсов, в том числе в Window и WorkerGlobalScope. Это позволяет использовать его практически в любом контексте для получения данных.

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

Как только Response выполнится успешно, становятся доступными несколько методов для определения тела контента и, как его содержимое должно быть обработано (см. Body.)

Вы можете создавать запрос и ответ непосредственно, используя конструкторы Request() и Response(), но маловероятно, что в этом есть необходимость. Напротив, более вероятно, что они будут созданы как результат работы другого API (например, FetchEvent.respondWith в service workers.)

Отличия от jQuery

Спецификации fetch() отличаются от jQuery.ajax() тремя основными способами:

  • Промис, возвращённый из fetch(), не будет отвергнут при статусе ошибки HTTP, даже если ответ является HTTP 404 или 500. Вместо этого, оно будет разрешаться нормально (со статусом ok установленным в false), и будет отклоняться только при сбое в сети или если что-то помешало завершению запроса.
  • fetch() может получать межсайтовые куки-файлы; таким образом вы можете установить межсайтовую сессию используя fetch.
  • fetch() не будет посылать куки-файлы, если только не указано credentials: 'same-origin'.

Примечание: Узнайте больше об использовании Fetch API на Using Fetch и изучите концепции на Fetch basic concepts.

Прерывание выборки

Браузеры начали добавлять экспериментальную поддержку для AbortController и AbortSignal интерфейсов (aka The Abort API), которые позволяют прерывать операции, такие как Fetch и XHR, если они ещё не завершены. Подробности смотрите на страницах интерфейсов.

Fetch интерфейсы

GlobalFetch

Содержит метод fetch(), используемый для получения ресурсов.

Headers

Представляет заголовки запроса/ответа, позволяет запрашивать данные и выполнять различные действия в зависимости от результата.

Request

Запрашивает ресурс.

Response

Представляет ответ на запрос.

Fetch примесь

Body

Предоставляет методы, относящиеся к телу запроса/ответа, позволяя вам определять content-type и то, как ответ должен быть обработан.

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

Specification
Fetch
# fetch-method

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

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
fetch
Authorization header removed from cross-origin redirects
Support for blob: and data:
Send ReadableStream in body
Experimental
init.attributionReporting parameter
Experimental
init.browsingTopics parameter
ExperimentalNon-standard
init.duplex parameter
Experimental
init.keepalive parameter
init.priority parameter
init.referrerPolicy parameter
init.signal parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

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