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.

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:

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:

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 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:

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