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.

O construtor Request() cria um novo objeto Request.

Sintaxe

var myRequest = new Request(input[, init]);

Parâmetros

input

Define o recurso que você deseja buscar. Isso pode ser:

  • Um USVString contendo o URL direto do recurso que você deseja buscar.

  • Um objeto Request, criando efetivamente uma cópia. Observe as seguintes atualizações comportamentais para reter a segurança e, ao mesmo tempo, tornar o construtor menos propenso a gerar exceções:

    • Se esse objeto existir em outra origem para a chamada do construtor, o Request.referrer será removido.
    • Se esse objeto tiver um Request.mode de navegação, o valor do modo será convertido para a mesma origem.
init Optional

Um objeto de opções contendo quaisquer configurações personalizadas que você deseja aplicar à solicitação. As opções possíveis são:

  • method: O método de request, ex: GET, POST.
  • headers: Quaisquer cabeçalhos que você deseja adicionar à sua solicitação, contidos em um objeto Headers ou em um objeto literal com valores de ByteString.
  • body: Qualquer corpo que você deseja adicionar à sua solicitação: isso pode ser um Blob, BufferSource, FormData, URLSearchParams, USVString, ou objeto ReadableStream. Observe que uma solicitação usando o método GET ou HEAD não pode ter um corpo.
  • mode: O modo que você deseja usar para a solicitação, por exemplo: cors, no-cors, same-origin, or navigate. O padrão é cors. No Chrome o padrão é no-cors antes do Chrome 47 e same-origin do Chrome 47 em diante.
  • credentials: As credenciais de solicitação que você deseja usar para a solicitação: omit, same-origin, ou include. O padrão é omit. No Chrome o padrão é same-origin antes do Chrome 47 e include do Chrome 47 em diante.
  • cache: O cache mode que você deseja usar para a solicitação.
  • redirect: O modo de redirecionamento para usar: follow, error, or manual. No Chrome o padrão é follow (antes do Chrome 47 foi padronizado manual).
  • referrer: Um USVString especificando no-referrer, client, ou uma URL. O padrão é client.
  • integrity: Contém o valor de integridade do sub-recurso da solicitação (exemplo: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

Erros

Tipo Descrição
TypeError Desde Firefox 43, Request() lançará um TypeError se o URL tiver credenciais, tal como http://user:password@example.com.

Exemplo

Em nosso exemplo Fetch Request(veja Fetch Request live) nós criamos um novo objeto Request usando o construtor, em seguida, busque-o usando uma chamada GlobalFetch.fetch. Como estamos buscando uma imagem, executamos o Body.blob na resposta para fornecer o tipo MIME adequado para que ela seja manipulada corretamente. Em seguida, criamos uma URL do objeto e a exibimos em um Elemento <img>.

js
var myImage = document.querySelector("img");

var myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then(function (response) {
    return response.blob();
  })
  .then(function (response) {
    var objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
  });

Em nosso Fetch Request with init example (veja Fetch Request init live) nós fazemos a mesma coisa, exceto que passamos em um objeto init quando invocamos fetch():

js
var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg',myInit);

fetch(myRequest).then(function(response) {
  ...
});

Observe que você também pode passar o objeto init para a chamada fetch para obter o mesmo efeito, por exemplo:

js
fetch(myRequest,myInit).then(function(response) {
  ...
});

Você também pode usar um literal de objeto como headers em init.

js
var myInit = {
  method: "GET",
  headers: {
    "Content-Type": "image/jpeg",
  },
  mode: "cors",
  cache: "default",
};

var myRequest = new Request("flowers.jpg", myInit);

Você também pode passar um objeto Request para o construtor Request() para criar uma cópia do Request (isso é semelhante a chamar o método clone() .)

js
var copy = new Request(myRequest);

Nota: Este último uso é provavelmente útil apenas em ServiceWorkers.

Especificações

Specification
Fetch Standard
# ref-for-dom-request①

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também