initial commit

2 files changed, 322 insertions, 0 deletions

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
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>A interface <strong><code>Request</code></strong> da <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> representa uma requisição de recursos.</p>
+
+<p>Você pode criar um novo objeto <code>Request</code> usando o construtor {{domxref("Request.Request()")}}, porém é mais provável que você encontre um objeto <code>Request</code> que seja retornado como resultado de outra operação de API, como um service worker {{domxref("FetchEvent.request")}}.</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("Request.Request()")}}</dt>
+ <dd>Cria um novo objeto <code>Request</code>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
+ <dd>Contém o método da requisição (<code>GET</code>, <code>POST</code> etc.)</dd>
+ <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
+ <dd>Contém a URL da requisição.</dd>
+ <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
+ <dd>Contém o objeto {{domxref("Headers")}} associado à requisição.</dd>
+ <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
+ <dd>Contém o contexto da requisição (ex., <code>audio</code>, <code>image</code>, <code>iframe</code> etc.)</dd>
+ <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
+ <dd>Contém a referência da requisição (ex., <code>client</code>).</dd>
+ <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
+ <dd>Contém a política de referência da requisição (ex., <code>no-referrer</code>).</dd>
+ <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
+ <dd>Contém o modo da requisição (ex., <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd>
+ <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
+ <dd>Contém a credencial da requisição (Ex., <code>omit</code>, <code>same-origin</code>, <code>include</code>).</dd>
+ <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
+ <dd>Contém o modo de como os redirecionamentos serão tratados. Pode ser: <code>follow</code>, <code>error</code> ou <code>manual</code>.</dd>
+ <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
+ <dd>Contém o valor da <a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> da requisição (ex., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
+ <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
+ <dd>Contém o modo de cache da requisição (ex., <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
+</dl>
+
+<p><code>Request</code> implementa {{domxref("Body")}}, então também possui as seguintes propriedades disponíveis:</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>Um simples "getter" para ler o conteúdo do corpo através da interface {{domxref("ReadableStream")}}.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Armazena um {{domxref("Boolean", "Booleano")}} que declara se o corpo da requisição já foi utilizado em uma resposta.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Request.clone()")}}</dt>
+ <dd>Cria uma cópia atual do objeto <code>Request</code>.</dd>
+</dl>
+
+<p><code>Request</code> implementa {{domxref("Body")}}, então também possui os seguintes métodos disponíveis:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Retorna um objeto do tipo promise que resolve um {{domxref("ArrayBuffer")}} com a representação do corpo da requisição.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Retorna um objeto do tipo promise que resolve um {{domxref("Blob")}} com a representação do corpo da requisição.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Retorna um objeto do tipo promise que resolve um {{domxref("FormData")}} com a representação do corpo da requisição.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Retorna um objeto do tipo promise que resolve um {{domxref("JSON")}} com a representação do corpo da requisição.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Retorna um objeto do tipo promise que resolve um {{domxref("USVString")}} (texto) com a representação do corpo da requisição.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota</strong>: Os métodos de {{domxref("Body")}}  só poderão ser executadas apenas uma vez; As chamadas subsequentes serão resolvidas com strings/ArrayBuffers vazias.</p>
+</div>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>No exemplo a seguir, nós criamos uma nova requisição utilizando o construtor <code>Request()</code> (para um arquivo de imagem no mesmo diretório do código) e, em seguida, nos retorna alguns valores das propriedades da requisição:</p>
+
+<pre class="brush: js">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
+</pre>
+
+<p>Você poderá, então, solicitar uma nova requisição passando o objeto <code>Request</code> como parâmetro para a chamada {{domxref("GlobalFetch.fetch()")}}, por exemplo:</p>
+
+<pre class="brush: js">fetch(myRequest)
+  .then(response =&gt; response.blob())
+  .then(blob =&gt; {
+    myImage.src = URL.createObjectURL(blob);
+  });</pre>
+
+<p>No exemplo a seguir, nós criamos uma nova requisição utilizando o construtor <code>Request()</code> com alguns valores iniciais e contendo o corpo para APIs que precisam processar essas informações:</p>
+
+<pre class="brush: js">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
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> 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.</p>
+</div>
+
+<p>Você poderá, então, solicitar uma nova requisição passando o objeto <code>Request</code> como parâmetro para a chamada {{domxref("GlobalFetch.fetch()")}}, por exemplo, e poderá capturar a resposta da seguinte forma:</p>
+
+<pre class="brush: js">fetch(myRequest)
+  .then(response =&gt; {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Ops! Houve um erro em nosso servidor.');
+    }
+  })
+  .then(response =&gt; {
+    console.debug(response);
+    // ...
+  }).catch(error =&gt; {
+    console.error(error);
+  });</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#request-class','Request')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entres_navegadores">Compatibilidade entres navegadores</h2>
+
+
+
+<p>{{Compat("api.Request")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
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
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>O construtor <code><strong>Request()</strong></code> cria um novo objeto {{domxref("Request")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var myRequest = new Request(input[, init]);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>Define o recurso que você deseja buscar. Isso pode ser:
+ <ul>
+  <li>Um {{domxref("USVString")}} contendo o URL direto do recurso que você deseja buscar.</li>
+  <li>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:
+   <ul>
+    <li>Se esse objeto existir em outra origem para a chamada do construtor, o {{domxref("Request.referrer")}} será removido.</li>
+    <li>Se esse objeto tiver um {{domxref("Request.mode")}} de navegação, o valor do modo será convertido para a mesma origem.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Um objeto de opções contendo quaisquer configurações personalizadas que você deseja aplicar à solicitação. As opções possíveis são:
+ <ul>
+  <li><code>method</code>: O método de request, ex: <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: 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")}}.</li>
+  <li><code>body</code>: 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.</li>
+  <li><code>mode</code>: <span class="tlid-translation translation"><span title="">O modo que você deseja usar para a solicitação, por exemplo:</span></span> <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, or <code>navigate</code>. O padrão é <code>cors</code>. No Chrome o padrão é <code>no-cors</code> antes do Chrome 47 e <code>same-origin</code> do Chrome 47 em diante.</li>
+  <li><code>credentials</code>: As credenciais de solicitação que você deseja usar para a solicitação: <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. O padrão é <code>omit</code>. No Chrome o padrão é <code>same-origin</code> antes do Chrome 47 e <code>include</code> do Chrome 47 em diante.</li>
+  <li><code>cache</code>: O <a href="/en-US/docs/Web/API/Request/cache">cache mode</a>  <span class="tlid-translation translation"><span title="">que você deseja usar para a solicitação.</span></span></li>
+  <li><code>redirect</code>: O modo de redirecionamento para usar: <code>follow</code>, <code>error</code>, or <code>manual</code>. No Chrome o padrão é <code>follow</code> (antes do Chrome 47 foi padronizado <code>manual</code>).</li>
+  <li><code>referrer</code>: Um {{domxref("USVString")}} especificando <code>no-referrer</code>, <code>client</code>, ou uma URL. O padrão é <code>client</code>.</li>
+  <li><code>integrity</code>: Contém o <a href="/en-US/docs/Web/Security/Subresource_Integrity">valor de integridade do sub-recurso</a> da solicitação (exemplo: <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Erros">Erros</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Desde <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>Request()</code> lançará um TypeError se o URL tiver credenciais, tal como http://user:password@example.com.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Em nosso <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request-with-init">exemplo Fetch Request </a>(veja <a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) nós criamos um novo objeto <code>Request</code> usando o construtor, <span class="tlid-translation translation"><span title="">em seguida, busque-o usando uma chamada </span></span>{{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")}}.</p>
+
+<pre class="brush: 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;
+});</pre>
+
+<p>Em nosso <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request-with-init">Fetch Request with init example</a> (veja <a href="http://mdn.github.io/fetch-examples/fetch-request-with-init/">Fetch Request init live</a>) nós fazemos a mesma coisa, exceto que passamos em um objeto init quando invocamos <code>fetch()</code>:</p>
+
+<pre class="brush: 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) {
+  ...
+});</pre>
+
+<p><span class="tlid-translation translation"><span title="">Observe que você também pode passar o objeto init para a chamada </span></span><code>fetch</code><span class="tlid-translation translation"><span title=""> para obter o mesmo efeito, por exemplo:</span></span></p>
+
+<pre class="brush: js">fetch(myRequest,myInit).then(function(response) {
+  ...
+});</pre>
+
+<p>Você também pode usar um literal de objeto como <code>headers</code> em <code>init</code>.</p>
+
+<pre class="brush: js">var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+</pre>
+
+<p><span class="tlid-translation translation"><span title="">Você também pode passar um objeto {{domxref ("Request")}} para o construtor</span></span> <code>Request() </code><span class="tlid-translation translation"><span title="">para criar uma cópia do Request (isso é semelhante a chamar o método {{domxref("Request.clone", "clone()")}}</span> <span title="">.)</span></span></p>
+
+<div class="codehilite" style="background: #f0f3f3;">
+<pre style="line-height: 125%;">var copy = new Request(myRequest);
+</pre>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Este último uso é provavelmente útil apenas em <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request','Request()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">e envie-nos um</span></span> pull request.</div>
+
+<p>{{Compat("api.Request.Request")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>