1 files changed, 136 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/statements/for-await...of/index.html b/files/pt-br/web/javascript/reference/statements/for-await...of/index.html
new file mode 100644
index 0000000000..c584b497a8
--- /dev/null
+++ b/files/pt-br/web/javascript/reference/statements/for-await...of/index.html
@@ -0,0 +1,136 @@
+---
+title: for await...of
+slug: Web/JavaScript/Reference/Statements/for-await...of
+translation_of: Web/JavaScript/Reference/Statements/for-await...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>A <strong>declaração</strong> <strong><code>for await...of</code> </strong>cria um loop que itera sobre objetos iteráveis assíncronos, bem como sobre iteráveis síncronos, incluindo: {{jsxref("String")}}, {{jsxref("Array")}}, <code>Array</code>-como objetos (e.g., {{jsxref("Functions/arguments", "arguments")}} or {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, e iteráveis async/sync. Invoca um hook de iteração personalizado com instruções a serem executadas para o valor de cada propriedade do objeto.</p>
+
+
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">for await (<code>variável</code> of <code>iterável</code>) {
+  <em>// declaração
+</em>}
+</pre>
+
+<dl>
+ <dt><code>variável</code></dt>
+ <dd>Em cada iteração, o valor de uma propriedade diferente é atribuído à <em>variável</em>. A <em>variável</em> pode ser declarada como <code>const</code>, <code>let</code> ou <code>var</code>.</dd>
+ <dt><code>iterável</code></dt>
+ <dd>Objeto cujas propriedades iteráveis devem ser iteradas.</dd>
+</dl>
+
+<h3 id="Iterando_sobre_iteráveis_assíncronos">Iterando sobre iteráveis assíncronos</h3>
+
+<p>Você também pode iterar sobre um objeto que explicidamente implementa protocolo iterável assíncrono(<em>async iterable protocol</em>):</p>
+
+<pre class="brush:js">var asyncIterable = {
+  [Symbol.asyncIterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return Promise.resolve({ value: this.i++, done: false });
+        }
+
+        return Promise.resolve({ done: true });
+      }
+    };
+  }
+};
+
+(async function() {
+   for await (let num of asyncIterable) {
+     console.log(num);
+   }
+})();
+
+// 0
+// 1
+// 2
+</pre>
+
+<h3 id="Iterando_sobre_generators_assíncronos">Iterando sobre generators assíncronos</h3>
+
+<p>Como os geradores assíncronos implementam o protocolo assíncrono Iterator, eles podem fazer um loop usando <code>for await... of</code></p>
+
+<pre class="brush: js">async function* asyncGenerator() {
+  var i = 0;
+  while (i &lt; 3) {
+    yield i++;
+  }
+}
+
+(async function() {
+  for await (let num of asyncGenerator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2</pre>
+
+<p>Para termos um exemplo mais concreto de iteração sobre um generator assíncrono usando <code>for await... of</code>, considere iterar sobre dados obtidos através de um fecth de uma API. Este exemplo cria primeiro um iterador assíncrono para um stream de dados e depois usa-o para encontrar o tamanho da resposta da API. </p>
+
+<pre class="brush: js">async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        return;
+      }
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+// Obtém dados do URL e calcula o tamanho da resposta usando o generator assíncrono
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  // Guardará o tamanho do response em bytes.
+  let responseSize = 0;
+  // O for-wait-loop irá iterar de forma assíncrona sobre cada parte do response.
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    // Incrementa o valor do responseSize
+    responseSize += chunk.length;
+  }
+
+  console.log(`Response Size: ${responseSize} bytes`);
+  // output esperado:"Response Size: 1071472"
+  return responseSize;
+}
+getResponseSize('https://jsonplaceholder.typicode.com/photos');</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('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada de dados estruturados. Se você quiser contribuir para os dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.statements.for_await_of")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of")}}</li>
+</ul>