We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support42 Yes39 No28 No
Request() constructor

42

411

15

39

342

No

29

283

10.1
cache No5 Yes48 No No11
context42 — 46 ?39 — 426 No28 — 29 No
credentials

42

417

Yes

39

342

No

29

283

No
headers

42

417

Yes

39

342

No

29

283

No
integrity46 Yes Yes No Yes No
keepalive6615 ? ?43 ?
method

42

417

Yes

39

342

No

29

283

No
mode42 Yes39 No29 No
redirect46 Yes Yes No Yes No
referrer

42

417

Yes47 No

29

283

No
referrerPolicy52 Yes47 No ? No
url

42

417

Yes

39

342

No

29

283

No
clone

42

417

Yes

39

342

No

29

283

No
destination ? ? ? ? ? ?
signal ?16 ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4242 Yes Yes28 No4.0
Request() constructor

42

411

42

411

Yes Yes No10.3

4.0

5.04

cache No No Yes No No No No
context42 — 4642 — 46 ? No No No4.0
credentials No42 — 46 Yes No No No4.0
headers No42 — 46 Yes No No No4.0
integrity No46 Yes No Yes No5.0
keepalive No66 ? ?43 ? No
method No42 — 46 Yes No No No4.0
mode4949 Yes No No No5.0
redirect No46 Yes Yes Yes No5.0
referrer No No Yes No No No No
referrerPolicy ? ? Yes ? No No ?
url No42 — 46 Yes No No No4.0
clone No No Yes No No No No
destination ? ? ? ? ? ? ?
signal ? ? ? ? ? ? ?

1. Some default values for the init parameter changed in Chrome 47. See the Properties section for details.

2. From version 34: this feature is behind the dom.fetch.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Experimental Web Platform Features preference.

4. Some default values for the init parameter changed in Samsung Internet 5.0. See the Properties section for details.

5. Nightly build

6. see bug 1188062 for more information.

7. From version 41: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: valdeirpsr
Última atualização por: valdeirpsr,