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

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 Status Comment
Fetch
The definition of 'Request' in that specification.		 Padrão em tempo real Initial definition

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também