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:

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

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também