Request

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 (en-US).

Construtor

Request.Request(): Cria um novo objeto Request.

Propriedades

Request.method (en-US) Somente leitura: Contém o método da requisição (GET, POST etc.)
Request.url (en-US) Somente leitura: Contém a URL da requisição.
Request.headers (en-US) Somente leitura: Contém o objeto Headers (en-US) associado à requisição.
Request.context (en-US) Somente leitura Deprecated: Contém o contexto da requisição (ex., audio, image, iframe etc.)
Request.referrer (en-US) Somente leitura: Contém a referência da requisição (ex., client).
Request.referrerPolicy (en-US) Somente leitura: Contém a política de referência da requisição (ex., no-referrer).
Request.mode (en-US) Somente leitura: Contém o modo da requisição (ex., cors, no-cors, same-origin, navigate.)
Request.credentials (en-US) Somente leitura: Contém a credencial da requisição (Ex., omit, same-origin, include).
Request.redirect (en-US) Somente leitura: Contém o modo de como os redirecionamentos serão tratados. Pode ser: follow, error ou manual.
Request.integrity (en-US) Somente leitura: Contém o valor da subresource integrity (en-US) da requisição (ex., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
Request.cache (en-US) 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 (en-US) Somente leitura: Um simples "getter" para ler o conteúdo do corpo através da interface ReadableStream (en-US).
Body.bodyUsed (en-US) Somente leitura: Armazena um Booleano (en-US) que declara se o corpo da requisição já foi utilizado em uma resposta.

Métodos

Request.clone() (en-US): Cria uma cópia atual do objeto Request.

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

Body.arrayBuffer() (en-US): Retorna um objeto do tipo promise que resolve um ArrayBuffer com a representação do corpo da requisição.
Body.blob() (en-US): Retorna um objeto do tipo promise que resolve um Blob com a representação do corpo da requisição.
Body.formData() (en-US): Retorna um objeto do tipo promise que resolve um FormData com a representação do corpo da requisição.
Body.json() (en-US): Retorna um objeto do tipo promise que resolve um JSON com a representação do corpo da requisição.
Body.text() (en-US): Retorna um objeto do tipo promise que resolve um USVString (en-US) (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:

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() (en-US), por exemplo:

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:

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 (en-US) ou ReadableStream (en-US). 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() (en-US), por exemplo, e poderá capturar a resposta da seguinte forma:

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 Standard # request-class

Compatibilidade com navegadores

BCD tables only load in the browser