1 files changed, 89 insertions, 0 deletions
diff --git a/files/pt-br/web/api/body/json/index.html b/files/pt-br/web/api/body/json/index.html
new file mode 100644
index 0000000000..7ee4482fe5
--- /dev/null
+++ b/files/pt-br/web/api/body/json/index.html
@@ -0,0 +1,89 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - JSON
+  - Referencia
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>O método <strong><code>json()</code></strong>  do mixin {{DOMxRef("Body")}} usa uma stream do objeto {{DOMxRef("Response")}} para tratar. O método <strong>json() </strong>retorna uma Promise como resultado do processamento da stream, retornando um objeto {{JSxRef("JSON")}} em caso de sucesso.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>response</em>.json().then(<em>data</em> =&gt; {
+  // do something with your data
+});</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<p>Nenhum.</p>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Uma {{jsxref("Promise")}} que retorna um objeto Javascript no método <strong>resolve()</strong>. Pode ser qualquer tipo que pode ser representado com JSON — objeto, array, string, numeral...</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Em nosso <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">exemplo de fetch em json</a> (teste <a href="http://mdn.github.io/fetch-examples/fetch-json/">aqui a busca em json com fetch</a>), nós criamos uma nova requisição usando o constructor de {{DOMxRef("Request.Request", "Request()")}}, e em seguimos a usamos para buscar um arquivo <code>.json</code>. Quando o fetch é bem-sucedido, nós lemos e tratamos a stream com o método <code>json()</code>, lê os valores em forma de objeto retornados como esperado e inserimos na lista para exibir os dados dos produtos.</p>
+
+<pre class="brush: js highlight[5] notranslate">const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(response =&gt; response.json())
+  .then(data =&gt; {
+    for (const product of data.products) {
+      let listItem = document.createElement('li');
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = product.Name;
+      listItem.append(
+        ` can be found in ${
+          product.Location
+        }. Cost: `
+      );
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = `£${product.Price}`;
+      myList.appendChild(listItem);
+    }
+  })
+  .catch(console.error);</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Definição Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2>
+
+
+
+<p>{{Compat("api.Body.json")}}</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/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>