From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/request/index.html | 167 +++++++++++++++++++++++++ files/pt-br/web/api/request/request/index.html | 155 +++++++++++++++++++++++ 2 files changed, 322 insertions(+) create mode 100644 files/pt-br/web/api/request/index.html create mode 100644 files/pt-br/web/api/request/request/index.html (limited to 'files/pt-br/web/api/request') diff --git a/files/pt-br/web/api/request/index.html b/files/pt-br/web/api/request/index.html new file mode 100644 index 0000000000..3c29999829 --- /dev/null +++ b/files/pt-br/web/api/request/index.html @@ -0,0 +1,167 @@ +--- +title: Request +slug: Web/API/Request +tags: + - API + - Experimental + - Fetch + - Fetch API + - Requisições + - request +translation_of: Web/API/Request +--- +
{{APIRef("Fetch")}}
+ +

A interface Request da Fetch API representa uma requisição de recursos.

+ +

Você pode criar um novo objeto Request usando o construtor {{domxref("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 {{domxref("FetchEvent.request")}}.

+ +

Construtor

+ +
+
{{domxref("Request.Request()")}}
+
Cria um novo objeto Request.
+
+ +

Propriedades

+ +
+
{{domxref("Request.method")}} {{readonlyInline}}
+
Contém o método da requisição (GET, POST etc.)
+
{{domxref("Request.url")}} {{readonlyInline}}
+
Contém a URL da requisição.
+
{{domxref("Request.headers")}} {{readonlyInline}}
+
Contém o objeto {{domxref("Headers")}} associado à requisição.
+
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+
Contém o contexto da requisição (ex., audio, image, iframe etc.)
+
{{domxref("Request.referrer")}} {{readonlyInline}}
+
Contém a referência da requisição (ex., client).
+
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+
Contém a política de referência da requisição (ex., no-referrer).
+
{{domxref("Request.mode")}} {{readonlyInline}}
+
Contém o modo da requisição (ex., cors, no-cors, same-origin, navigate.)
+
{{domxref("Request.credentials")}} {{readonlyInline}}
+
Contém a credencial da requisição (Ex., omit, same-origin, include).
+
{{domxref("Request.redirect")}} {{readonlyinline}}
+
Contém o modo de como os redirecionamentos serão tratados. Pode ser: follow, error ou manual.
+
{{domxref("Request.integrity")}} {{readonlyInline}}
+
Contém o valor da subresource integrity da requisição (ex., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
+
{{domxref("Request.cache")}} {{readonlyInline}}
+
Contém o modo de cache da requisição (ex., default, reload, no-cache).
+
+ +

Request implementa {{domxref("Body")}}, então também possui as seguintes propriedades disponíveis:

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
Um simples "getter" para ler o conteúdo do corpo através da interface {{domxref("ReadableStream")}}.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Armazena um {{domxref("Boolean", "Booleano")}} que declara se o corpo da requisição já foi utilizado em uma resposta.
+
+ +

Métodos

+ +
+
{{domxref("Request.clone()")}}
+
Cria uma cópia atual do objeto Request.
+
+ +

Request implementa {{domxref("Body")}}, então também possui os seguintes métodos disponíveis:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Retorna um objeto do tipo promise que resolve um {{domxref("ArrayBuffer")}} com a representação do corpo da requisição.
+
{{domxref("Body.blob()")}}
+
Retorna um objeto do tipo promise que resolve um {{domxref("Blob")}} com a representação do corpo da requisição.
+
{{domxref("Body.formData()")}}
+
Retorna um objeto do tipo promise que resolve um {{domxref("FormData")}} com a representação do corpo da requisição.
+
{{domxref("Body.json()")}}
+
Retorna um objeto do tipo promise que resolve um {{domxref("JSON")}} com a representação do corpo da requisição.
+
{{domxref("Body.text()")}}
+
Retorna um objeto do tipo promise que resolve um {{domxref("USVString")}} (texto) com a representação do corpo da requisição.
+
+ +
+

Nota: Os métodos de {{domxref("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 {{domxref("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: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("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 {{domxref("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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#request-class','Request')}}{{Spec2('Fetch')}}Initial definition
+ +

Compatibilidade entres navegadores

+ + + +

{{Compat("api.Request")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/request/request/index.html b/files/pt-br/web/api/request/request/index.html new file mode 100644 index 0000000000..ac46f16fd3 --- /dev/null +++ b/files/pt-br/web/api/request/request/index.html @@ -0,0 +1,155 @@ +--- +title: Request() +slug: Web/API/Request/Request +translation_of: Web/API/Request/Request +--- +
{{APIRef("Fetch")}}
+ +

O construtor Request() cria um novo objeto {{domxref("Request")}}.

+ +

Sintaxe

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

Parâmetros

+ +
+
input
+
Define o recurso que você deseja buscar. Isso pode ser: +
    +
  • Um {{domxref("USVString")}} contendo o URL direto do recurso que você deseja buscar.
    • +
  • Um objeto {{domxref("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 {{domxref("Request.referrer")}} será removido.
      • +
    • Se esse objeto tiver um {{domxref("Request.mode")}} de navegação, o valor do modo será convertido para a mesma origem.
      • +
    +
    • +
+
+
init {{optional_inline}}
+
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 {{domxref("Headers")}} ou em um objeto literal com valores de {{domxref("ByteString")}}.
    • +
  • body: Qualquer corpo que você deseja adicionar à sua solicitação: isso pode ser um {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, ou objeto {{domxref("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 {{domxref("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

+ + + + + + + + + + + + + + +
TipoDescrição
TypeErrorDesde 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 {{domxref("GlobalFetch.fetch")}}. Como estamos buscando uma imagem, executamos o {{domxref("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 {{htmlelement("img")}}.

+ +
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():

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

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

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

+ +
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 {{domxref ("Request")}} para o construtor Request() para criar uma cópia do Request (isso é semelhante a chamar o método {{domxref("Request.clone", "clone()")}} .)

+ +
+
var copy = new Request(myRequest);
+
+
+ +
+

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

+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('Fetch','#dom-request','Request()')}}{{Spec2('Fetch')}} 
+ +

Compatibilidade de Browser

+ + + +

{{Compat("api.Request.Request")}}

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf