Request

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.

A interface Request da Fetch API representa uma requisição de recursos.

Você pode criar um novo objeto Request usando o construtor Request.Request(), porém é mais provável que você encontre um objeto Request que seja retornado como resultado de outra operação de API, como um service worker FetchEvent.request.

Construtor

Request.Request()

Cria um novo objeto Request.

Propriedades

Request.method Somente leitura

Contém o método da requisição (GET, POST etc.)

Request.url Somente leitura

Contém a URL da requisição.

Request.headers Somente leitura

Contém o objeto Headers associado à requisição.

Request.context Somente leitura Deprecated

Contém o contexto da requisição (ex., audio, image, iframe etc.)

Request.referrer Somente leitura

Contém a referência da requisição (ex., client).

Request.referrerPolicy Somente leitura

Contém a política de referência da requisição (ex., no-referrer).

Request.mode Somente leitura

Contém o modo da requisição (ex., cors, no-cors, same-origin, navigate.)

Request.credentials Somente leitura

Contém a credencial da requisição (Ex., omit, same-origin, include).

Request.redirect Somente leitura

Contém o modo de como os redirecionamentos serão tratados. Pode ser: follow, error ou manual.

Request.integrity Somente leitura

Contém o valor da subresource integrity da requisição (ex., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

Request.cache Somente leitura

Contém o modo de cache da requisição (ex., default, reload, no-cache).

Request implementa Body, então também possui as seguintes propriedades disponíveis:

Body.body Somente leitura

Um simples "getter" para ler o conteúdo do corpo através da interface ReadableStream.

Body.bodyUsed Somente leitura

Armazena um Booleano que declara se o corpo da requisição já foi utilizado em uma resposta.

Métodos

Request.clone()

Cria uma cópia atual do objeto Request.

Request implementa Body, então também possui os seguintes métodos disponíveis:

Body.arrayBuffer()

Retorna um objeto do tipo promise que resolve um ArrayBuffer com a representação do corpo da requisição.

Body.blob()

Retorna um objeto do tipo promise que resolve um Blob com a representação do corpo da requisição.

Body.formData()

Retorna um objeto do tipo promise que resolve um FormData com a representação do corpo da requisição.

Body.json()

Retorna um objeto do tipo promise que resolve um JSON com a representação do corpo da requisição.

Body.text()

Retorna um objeto do tipo promise que resolve um USVString (texto) com a representação do corpo da requisição.

Nota: Os métodos de Body só poderão ser executadas apenas uma vez; As chamadas subsequentes serão resolvidas com strings/ArrayBuffers vazias.

Exemplos

No exemplo a seguir, nós criamos uma nova requisição utilizando o construtor Request() (para um arquivo de imagem no mesmo diretório do código) e, em seguida, nos retorna alguns valores das propriedades da requisição:

js
const myRequest = new Request("http://localhost/flowers.jpg");

const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit

Você poderá, então, solicitar uma nova requisição passando o objeto Request como parâmetro para a chamada GlobalFetch.fetch(), por exemplo:

js
fetch(myRequest)
  .then((response) => response.blob())
  .then((blob) => {
    myImage.src = URL.createObjectURL(blob);
  });

No exemplo a seguir, nós criamos uma nova requisição utilizando o construtor Request() com alguns valores iniciais e contendo o corpo para APIs que precisam processar essas informações:

js
const myRequest = new Request("http://localhost/api", {
  method: "POST",
  body: '{"foo":"bar"}',
});

const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed; // true

Nota: O tipo do corpo poderá ser apenas: Blob, BufferSource, FormData, URLSearchParams, USVString ou ReadableStream. Para adicionar um objeto JSON ao corpo, é necessário converter esse objeto para string.

Você poderá, então, solicitar uma nova requisição passando o objeto Request como parâmetro para a chamada GlobalFetch.fetch(), por exemplo, e poderá capturar a resposta da seguinte forma:

js
fetch(myRequest)
  .then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error("Ops! Houve um erro em nosso servidor.");
    }
  })
  .then((response) => {
    console.debug(response);
    // ...
  })
  .catch((error) => {
    console.error(error);
  });

Especificações

Specification
Fetch
# request-class

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
Request
Request() constructor
cross-origin referrer stripped out and navigate mode converted to same-origin when constructor created from existing Request object.
init.attributionReporting parameter
Experimental
init.browsingTopics parameter
ExperimentalNon-standard
init.duplex parameter
Experimental
init.keepalive parameter
init.priority parameter
init.referrer parameter
Send ReadableStream in request body
Experimental
Consume ReadableStream as a response body
arrayBuffer
blob
body
bodyUsed
bytes
cache
cache.only-if-cached
clone
credentials
Default value same-origin
destination
duplex
Experimental
formData
headers
integrity
isHistoryNavigation
json
keepalive
method
mode
navigate mode
redirect
referrer
referrerPolicy
signal
targetAddressSpace
Experimental
text
url

Legend

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

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
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