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.

Experimental: Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A Fetch API fornece uma interface para buscar recursos (por exemplo, em toda a rede). Parecerá familiar para qualquer pessoa que tenha usado XMLHttpRequest, porém a nova API oferece um conjunto de recursos mais poderoso e flexível.

Conceitos e uso

O Fetch fornece uma definição genérica de objetos de Request e Response (e outras coisas envolvidas com solicitações de rede). Isso permitirá que eles sejam usados onde quer que sejam necessários no futuro, seja para service workers, Cache API e outras coisas similares que manipulam ou modifiquem pedidos e respostas ou qualquer tipo de caso de uso que possa exigir que você gere suas próprias responses programaticamente.

Ele também fornece uma definição para conceitos relacionados como CORS e a semântica de cabeçalho de origem HTTP, suplantando suas definições separadas em outro lugar.

Para fazer uma solicitação e buscar um recurso, use o método GlobalFetch.fetch . Ele é implementado em várias interfaces, especificamente Window e WorkerGlobalScope. Isso torna disponível em praticamente qualquer contexto em que você possa querer obter recursos.

O método fetch () tem um argumento obrigatório, o caminho para o recurso que deseja obter. Ele retorna uma promessa que resolve a Response para esta requisição, seja ele bem-sucedido ou não. Você também pode, opcionalmente, passar um objeto de opções de inicialização como o segundo argumento (consulte Request).

Uma vez que uma Response é recuperada, há uma série de métodos disponíveis para definir o conteúdo do corpo e como ele deve ser tratado (veja Body.)

Você pode criar um pedido e uma resposta diretamente usando os construtores Request() e Response(), mas é improvável que você faça isso diretamente. Em vez disso, é mais provável que sejam criados como resultados de outras ações da API (por exemplo, FetchEvent.respondWith de service workers).

Nota: Encontre mais informações sobre os recursos do Fetch API em Using Fetch, e conceitos para estudos em Fetch basic concepts.

Fetch Interfaces

GlobalFetch

Contém o método fetch() usado para buscar um recurso.

Headers

Representa cabeçalhos response/request, permitindo que você os consulte e faça diferentes ações dependendo dos resultados.

Request

Representa um pedido de recursos.

Response

Representa a resposta de uma requisição.

Fetch mixin

Body

Providencia métodos relacionados ao corpo da resposta/requisição, permitindo que você declare qual seu tipo de conteúdo e como ele deve ser tratado.

Especificações

Specification
Fetch
# fetch-method

Compatibilidade com navegadores

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.

Veja também