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.

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   This deprecated API should no longer be used, but will probably still work.
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-origininclude).
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 Status Comment
Fetch
The definition of 'Request' in that specification.
Padrão em tempo real Initial definition

Compatibilidade entres navegadores

BCD tables only load in the browser

Veja também