update fetch page brazilian portuguese (#3334)

* chore: convert to md and translate until credentials

* feat: finish Portuguese translation

2 files changed, 341 insertions, 306 deletions

diff --git a/files/pt-br/web/api/fetch/index.html b/files/pt-br/web/api/fetch/index.html
deleted file mode 100644
index f864600c86..0000000000
--- a/files/pt-br/web/api/fetch/index.html
+++ /dev/null
@@ -1,306 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.fetch()
-slug: Web/API/fetch
-translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
-original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
----
-<div>{{APIRef("Fetch API")}}</div>
-
-<p>O método <code><strong>fetch()</strong></code> do mixin {{domxref("WindowOrWorkerGlobalScope")}} inicia um processo de busca de um recurso da rede. Este, retorna uma promessa que resolve o objeto {{domxref("Response")}} que representa a resposta a sua requisição. </p>
-
-<p><code>WorkerOrGlobalScope</code> é implementado por {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}, o que significa que o método <code>fetch()</code> está disponível em praticamente qualquer contexto em que você possa querer obter recursos.</p>
-
-<p>Uma promessa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} rejeita com um {{jsxref("TypeError")}} quando um erro de rede é encontrado, embora isso geralmente signifique um problema de permissões ou similar. Uma verificação precisa de um <code>fetch()</code> bem-sucedido incluiria a verificação de uma promessa resolvida, e depois verificando se a propriedade {{domxref("Response.ok")}} possui valor <code>true</code>. Um status HTTP 404 não constitui um erro de rede.</p>
-
-<p>O método <code>fetch()</code> é controlado pela diretiva <code>connect-src</code> da <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> em vez da diretiva dos recursos que está recuperando.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Os parâmetros do método <code>fetch()</code> são idênticos aos do construtor {{domxref("Request.Request","Request()")}}.</p>
-</div>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
-
-<h3 id="Parâmetros">Parâmetros</h3>
-
-<dl>
- <dt><em>input</em></dt>
- <dd>Isto define o recurso que você deseja buscar. Isto pode ser:
- <ul>
-  <li>Um {{domxref("USVString")}} contendo uma URL direta para o recurso que você quer obter. Alguns navegadores aceitam <code>blob:</code> e <code>data:</code> como esquemas.</li>
-  <li>Um objeto {{domxref("Request")}}.</li>
- </ul>
- </dd>
- <dt><em>init</em> {{optional_inline}}</dt>
- <dd>Um objeto opcional que contém configurações personalizadas que você pode aplicar à requisição. As opções possíveis são:
- <ul>
-  <li><code>method</code>: Método HTTP, por exemplo, <code>GET</code>, <code>POST</code>.</li>
-  <li><code>headers</code>: Qualquer cabeçalho que você queira adicionar à sua requisição, contido dentro de um objeto {{domxref("Headers")}} ou um objeto literal com valores {{domxref("ByteString")}}.</li>
-  <li><code>body</code>: Qualquer corpo que você queira adicionar à sua requisição: podendo ser um {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou um objeto {{domxref("USVString")}}. Note que uma requisição usando os métodos <code>GET</code> ou <code>HEAD</code> não pode ter um corpo.</li>
-  <li><code>mode</code>: O modo que deseja usar para a requisição, por exemplo, <code>cors</code>, <code>no-cors</code>, ou <code>same-origin.</code></li>
-  <li><code>credentials</code>: A credencial que deseja usar para a requisição: <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. Para enviar automaticamente cookies para o domínio atual, esta opção deve ser fornecida. Começando com o Chrome 50, essa propriedade também usa uma instância {{domxref("FederatedCredential")}} ou uma instância {{domxref("PasswordCredential")}}.</li>
-  <li><code>cache</code>: O modo de cache que deseja usar na requisição: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, ou <code>only-if-cached</code>.</li>
-  <li><code>redirect</code>: O modo de redirecionamento pode usar: <code>follow</code> (segue automaticamente o redirecionamento), <code>error</code> (aborta com um erro se ocorrer um redirecionamento), ou <code>manual</code> (manipula redirecionamentos manualmente). No Chrome o padrão foi <code>follow</code> antes do Chrome 47 e <code>manual</code> a partir do Chrome 47.</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>referrerPolicy</code>: Especifica o valor do cabeçalho HTTP referer. Pode ser um destes: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
-  <li><code>integrity</code>: Contém o valor de <a href="/en-US/docs/Web/Security/Subresource_Integrity">integridade de subrecurso</a> da requisição (por exemplo, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
-  <li><code>signal</code>: Uma instância do objeto {{domxref("FetchSignal")}}; permite que você se comunique com um pedido de busca e controle-o através de um {{domxref("FetchController")}}. {{non-standard_inline}}</li>
-  <li><code>observe</code>: Um objeto {{domxref("ObserverCallback")}} — o objetivo exclusivo deste objeto é fornecer uma função de retorno de chamada que é executada quando a solicitação fetch é executada. Isto retorna um objeto {{domxref("FetchObserver")}} que pode ser usado para recuperar informações sobre o status de uma solicitação fetch. {{non-standard_inline}}</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
-
-<p>Uma {{domxref("Promise")}} que resolve um objeto {{domxref("Response")}}.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><strong>Tipo</strong></th>
-   <th scope="col"><strong>Descrição</strong></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>Desdo o <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code><br>
-    lançará um <code>TypeError</code> se a URL tiver credenciais, como <code>http://user:password@example.com</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Example">Example</h2>
-
-<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request example</a> (see <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) we create a new {{domxref("Request")}} object using the relevant constructor, then fetch it using a <code>fetch()</code> call. Since we are fetching an image, we run {{domxref("Body.blob()")}} on the response to give it the proper MIME type so it will be handled properly, then create an Object URL of it and display it in an {{htmlelement("img")}} element.</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>In our <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request example</a> (see <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) we do the same thing except that we pass in an init object when we invoke <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');
-
-fetch(myRequest,myInit).then(function(response) {
-  ...
-});</pre>
-
-<p>Note that you could also pass the init object in with the <code>Request</code> constructor to get the same effect, e.g.:</p>
-
-<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre>
-
-<p>You can also use an object literal as <code>headers</code> in <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>
-
-<h2 id="Specifications">Specifications</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','#fetch-method','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Initial definition</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Adds {{domxref("FederatedCredential")}} or {{domxref("PasswordCredential")}} instance as a possible value for <code>init.credentials</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatChrome(42)}}</td>
-   <td>14</td>
-   <td>{{CompatGeckoDesktop(34)}}<sup>[1]</sup><br>
-    {{CompatGeckoDesktop(39)}}<br>
-    {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>29<br>
-    28<sup>[1]</sup></td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td>Streaming response body</td>
-   <td>{{CompatChrome(43)}}</td>
-   <td>14</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td>Support for <code>blob:</code> and <code>data:</code></td>
-   <td>{{CompatChrome(48)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>referrerPolicy</code></td>
-   <td>{{CompatChrome(52)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>39</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>signal</code> and <code>observer</code></td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}<sup>[3]</sup></td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Android Webview</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-   <th>Chrome for Android</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome(42)}}</td>
-   <td>14</td>
-   <td>{{CompatGeckoMobile(52)}}<sup>[2]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome(42)}}</td>
-  </tr>
-  <tr>
-   <td>Streaming response body</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome(43)}}</td>
-   <td>14</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatChrome(43)}}</td>
-  </tr>
-  <tr>
-   <td>Support for <code>blob:</code> and <code>data:</code></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome(43)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatChrome(43)}}</td>
-  </tr>
-  <tr>
-   <td><code>referrerPolicy</code></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome(52)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>39</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatChrome(52)}}</td>
-  </tr>
-  <tr>
-   <td><code>signal</code> and <code>observer</code></td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}<sup>[3]</sup></td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] API is implemented behind a preference.</p>
-
-<p>[2] <code>fetch()</code> now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>
-
-<p>[3] Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs — <code>dom.fetchObserver.enabled</code> and <code>dom.fetchController.enabled</code> — and set the values of both to <code>true</code>.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
- <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/fetch/index.md b/files/pt-br/web/api/fetch/index.md
new file mode 100644
index 0000000000..07991ecaf1
--- /dev/null
+++ b/files/pt-br/web/api/fetch/index.md
@@ -0,0 +1,341 @@
+---
+title: fetch()
+slug: Web/API/fetch
+translation_of: Web/API/fetch
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - GlobalFetch
+  - Method
+  - Reference
+  - request
+browser-compat: api.fetch
+---
+
+{{APIRef("Fetch API")}}
+
+O método global **`fetch()`** inicia o processo de busca de um recurso da rede, retornando uma promessa que é cumprida assim que a resposta estiver disponível.
+
+A promessa é resolvida para o objeto {{domxref("Response")}} que representa a resposta à sua solicitação. A promessa _não_ rejeita erros de HTTP - apenas rejeita erros de rede. Você deve usar os manipuladores `then` para chechar erros de HTTP.
+
+`WindowOrWorkerGlobalScope` é implementado por {{domxref("Window")}} e
+{{domxref("WorkerGlobalScope")}}, o que significa que o método `fetch()` está disponível em praticamente qualquer contexto no qual você queira buscar recursos.
+
+Uma promessa {{domxref("fetch()")}} só é rejeitada quando um erro de rede é encontrado (que é geralmente quando há um problema de permissão ou
+similar). Uma promessa {{domxref("fetch()")}} _não_ rejeita erros HTTP (`404`, etc.). Em vez disso, um manipulador
+`then()` deve checar as propriedades {{domxref("Response.ok")}} e/ou
+{{domxref("Response.status")}}.
+
+O método `fetch()` é controlado pela diretiva `connect-src` da [Content Security Policy](/pt-BR/docs/Web/HTTP/Headers/Content-Security-Policy) em vez da diretiva dos recursos que está recuperando.
+
+> **Note:** Os parâmetros do método `fetch()` são idênticos 
+> aos do construtor {{domxref("Request.Request","Request()")}}.
+
+## Sintaxe
+
+```js
+const fetchResponsePromise = fetch(resource [, init])
+```
+
+### Parâmetros
+
+- `resource`
+
+  - : Isto define o recurso que você deseja buscar. Isto pode ser:
+
+    - String ou qualquer outro objeto com um [stringifier](/en-US/docs/MDN/Contribute/Howto/Write_an_API_reference/Information_contained_in_a_WebIDL_file#stringifiers) — incluindo um objeto {{domxref("URL")}} — que fornece a URL do recurso que você deseja buscar.
+    - Um objeto {{domxref("Request")}}.
+
+- `init` {{optional_inline}}
+
+  - : Um objeto contendo quaisquer configurações customizadas que você deseja aplicar à solicitação. As opções possíveis são:
+
+    - `method`
+      - : O método da requisição, por exemplo `GET`, `POST`. Observe que o cabeçalho
+        {{httpheader("Origin")}} não é definido em requisições Fetch com um método de
+        {{HTTPMethod("HEAD")}} ou {{HTTPMethod("GET")}}.
+        (Este comportamento foi corrigido no Firefox 65 — consulte {{bug(1508661)}}).
+    - `headers`
+      - : Qualquer cabeçalho que você queira adicionar à sua requisição, contido dentro de um objeto
+        {{domxref("Headers")}} ou um objeto literal com valores {{jsxref("String")}}. Observe que [alguns nomes são proibidos](/en-US/docs/Glossary/Forbidden_header_name).
+    - `body`
+      - : Qualquer corpo que você queira adicionar à sua requisição: podendo ser um
+        {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}},
+        {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, ou um objeto
+        {{domxref("ReadableStream")}}. Note que uma requisição usando os métodos
+        `GET` or `HEAD` não pode ter um corpo.
+    - `mode`
+      - : O modo que deseja usar para a requisição, por exemplo, `cors`,
+        `no-cors`, ou `same-origin`.
+    - `credentials`
+
+      - : Controla o que os navegadores fazem com as credenciais ([cookies](/pt-BR/docs/Web/HTTP/Cookies), entradas de [Autenticação HTTP](/pt-BR/docs/Web/HTTP/Authentication), e certificados de cliente TLS). Deve ser uma das seguintes strings:
+
+        - `omit`
+          - : Diz aos navegadores para excluir credenciais da requisição, e ignorar quaisquer credenciais enviadas de volta na resposta (por exemplo, qualquer cabeçalho {{HTTPHeader("Set-Cookie")}}).
+        - `same-origin`
+          - : Diz aos navegadores para incluir credenciais com requisições para URLs da mesma origem, e usar quaisquer credenciais enviadas de volta nas respostas de URLs da mesma origem.
+        - `include`
+
+          - : Diz aos navegadores para incluir credenciais em ambas requisições `same-origin` e `cross-origin`, e sempre use as credenciais enviadas de volta nas respostas.
+
+            > **Note:** As credenciais podem ser incluídas em requisições cross-origin simples e "finais", mas não devem ser incluídas em [requisições de comprovação de CORS](/en-US/docs/Web/HTTP/CORS#preflight_requests_and_credentials).
+
+    - `cache`
+      - : Uma string indicando como a requisição vai interagir como o [cache HTTP](/pt-BR/docs/Web/HTTP/Caching) do navegador. Os valores possíveis, `default`, `no-store`, `reload`, `no-cache`, `force-cache`, e `only-if-cached`, estão documentados no artigo para a propriedade {{domxref("Request/cache", "cache")}} do objeto {{domxref("Request")}}.
+    - `redirect`
+
+      - : Como lidar com uma resposta `redirect`:
+
+        - `follow`: Segue os redirecionamentos automaticamente. A menos que esteja definido de outra forma, o redirecionamento é definido, por padrão, como `follow`.
+        - `error`: Aborta com um erro se o redirecionamento ocorrer.
+        - `manual`: O autor da chamada pretende processar a resposta em outro contexto.
+          Veja [WHATWG fetch standard](https://fetch.spec.whatwg.org/#requests) para mais informações.
+
+    - `referrer`
+      - : Uma {{domxref("USVString")}} especificando o referenciador da requisição. Isso pode ser uma URL
+        same-origin, `about:client`, ou uma string vazia.
+    - `referrerPolicy`
+      - : Especifica a [referrer
+        policy](https://w3c.github.io/webappsec-referrer-policy/#referrer-policies) para usar para a requisição. Pode ser `no-referrer`,
+        `no-referrer-when-downgrade`, `same-origin`,
+        `origin`, `strict-origin`,
+        `origin-when-cross-origin`,
+        `strict-origin-when-cross-origin` ou `unsafe-url`.
+    - `integrity`
+      - : Contém o valor [subresource integrity](/en-US/docs/Web/Security/Subresource_Integrity)
+        da requisição (por exemplo,
+        `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).
+    - `keepalive`
+      - : A opção `keepalive` pode ser usada para permitir que a requisição sobreviva à página. A busca com a flag `keepalive` é uma substituição para a API
+        {{domxref("Navigator.sendBeacon()")}}.
+    - `signal`
+      - : Uma instância de objeto {{domxref("AbortSignal")}}; permite comunicar com uma requisição fetch e abortá-la, se desejado, por meio de um {{domxref("AbortController")}}.
+
+### Valor de retorno
+
+Uma {{jsxref("Promise")}} que resolve para um objeto {{domxref("Response")}}.
+
+### Exceções
+
+- `AbortError`
+  - : A requisição foi abortada devido a uma chamada ao {{domxref("AbortController")}} ou ao método
+    {{domxref("AbortController.abort", "abort()")}}.
+- `TypeError`
+  - : Pode ocorrer pelos seguintes motivos:
+
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Motivo</th>
+      <th scope="col">Exemplos de falha</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Nome do cabeçalho inválido</td>
+      <td>
+        <pre>
+// space in "C ontent-Type"
+const headers = {
+    "C ontent-Type": "text/xml",
+    "Breaking-Bad": "<3"
+};
+fetch('https://example.com/', { headers });
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Valor do cabeçalho inválido. O objeto header deve conter exatamente dois elementos.
+      </td>
+      <td>
+        <pre>
+const headers = [
+    ["Content-Type", "text/html", "extra"],
+    ["Accept"],
+];
+fetch('https://example.com/', { headers });
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        URL inválida ou esquema, ou está usando um esquema que fetch não suporta, ou está usando um esquema que não é suportado por um modo de requisição específico.
+      </td>
+      <td>
+        <pre>
+fetch('blob://example.com/', { mode: 'cors' })
+        </pre>
+      </td>
+    </tr>
+      <td>URL que inclui credenciais</td>
+      <td>
+        <pre>
+fetch('https://user:password@example.com/')
+        </pre>
+      </td>
+    <tr>
+      <td>URL de referência inválida</td>
+      <td>
+        <pre>
+fetch('https://example.com/', {
+  referrer: './abc\u0000df'
+})
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>Modos inválidos (<code>navigate</code> and <code>websocket</code>)</td>
+      <td>
+        <pre>
+fetch('https://example.com/', { mode: 'navigate' })
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Se o modo de cache da requisição é "only-if-cached" e o modo da requisição é diferente de "same-origin".
+      </td>
+      <td>
+        <pre>
+fetch('https://example.com/', {
+  cache: 'only-if-cached',
+  mode: 'no-cors'
+})
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Se o método da requisição for um token de nome inválido ou um dos cabeçalhos proibidos:
+        CONNECT, TRACE or TRACK
+      </td>
+      <td>
+        <pre>
+fetch('https://example.com/', { method: 'CONNECT' })
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Se o modo da requisição é "no-cors" e o método da requisição não é um método CORS-safe-listed (GET, HEAD ou POST)
+      </td>
+      <td>
+        <pre>
+fetch('https://example.com/', {
+  method: 'CONNECT',
+  mode: 'no-cors'
+})
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Se o método da requisição é GET ou HEAD e o corpo não for nulo(null) ou undefined.
+      </td>
+      <td>
+        <pre>
+fetch('https://example.com/', {
+  method: 'GET',
+  body: new FormData()
+})
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>Se fetch gera um erro de rede.</td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>
+
+## Exemplos
+
+No nosso exemplo de [requisição Fetch](https://github.com/mdn/fetch-examples/tree/master/fetch-request) (veja [Fetch Request live](https://mdn.github.io/fetch-examples/fetch-request/)) nós criamos um novo objeto {{domxref("Request")}} usando um constructor relevante, depois buscamos isso usando uma chamada ao `fetch()`. Uma vez que estamos buscando uma imagem, executamos
+{{domxref("Response.blob()")}} na resposta para dar a ela o tipo MIME adequado para que lidemos adequadamente
+handled properly, então criamos um Objeto URL disso e exibimos isso em um elemento
+{{htmlelement("img")}}.
+
+```js
+const myImage = document.querySelector('img');
+
+let myRequest = new Request('flowers.jpg');
+
+fetch(myRequest)
+.then(function(response) {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return response.blob();
+})
+.then(function(response) {
+  let objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});
+```
+
+No exemplo [Fetch
+with init then Request](https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html) (veja [Fetch
+Request init live](https://mdn.github.io/fetch-examples/fetch-with-init-then-request/)), nós fazemos a mesma coisa exceto que passamos em um objeto
+`init` quando invocamos o `fetch()`:
+
+```js
+const myImage = document.querySelector('img');
+
+let myHeaders = new Headers();
+myHeaders.append('Accept', 'image/jpeg');
+
+const myInit = {
+  method: 'GET',
+  headers: myHeaders,
+  mode: 'cors',
+  cache: 'default'
+};
+
+let myRequest = new Request('flowers.jpg');
+
+fetch(myRequest, myInit).then(function(response) {
+  // ...
+});
+```
+
+Você também poderia passar o objeto `init` com o constructor
+`Request` para obter o mesmo efeito:
+
+```js
+let myRequest = new Request('flowers.jpg', myInit);
+```
+
+Você também pode usar um object literal como `headers` em
+`init`.
+
+```js
+const myInit = {
+  method: 'GET',
+  headers: {
+    'Accept': 'image/jpeg'
+  },
+  mode: 'cors',
+  cache: 'default'
+};
+
+let myRequest = new Request('flowers.jpg', myInit);
+```
+
+## Especificações
+
+{{Specifications}}
+
+## Compatibilidade nos navegadores
+
+{{Compat}}
+
+## Veja também
+
+- [Fetch API](/pt-BR/docs/Web/API/Fetch_API)
+- [ServiceWorker API](/pt-BR/docs/Web/API/Service_Worker_API)
+- [HTTP access control (CORS)](/pt-BR/docs/Web/HTTP/CORS)
+- [HTTP](/pt-BR/docs/Web/HTTP)