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
oumanual
. 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