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