1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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 < 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 < 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>
|
