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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: Funções assíncronas
slug: Web/JavaScript/Reference/Statements/async_function
tags:
- Função
- assíncrono
translation_of: Web/JavaScript/Reference/Statements/async_function
original_slug: Web/JavaScript/Reference/Statements/funcoes_assincronas
---
<div>{{jsSidebar("Statements")}}</div>
<p>A declaração <code><strong>async function</strong></code> define uma <em>função assíncrona</em>, que retorna um objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</p>
<div class="noinclude">
<p>Você também pode definir funções assíncronas usando uma {{jsxref("Operators/async_function", "expressão async function")}}.</p>
</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">async function <em>nome</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
<em>instruções</em>
}
</pre>
<dl>
<dt><code>nome</code></dt>
<dd>O nome da função.</dd>
</dl>
<dl>
<dt><code>param</code></dt>
<dd>O nome de um parâmetro a ser passado para a função.</dd>
</dl>
<dl>
<dt><code>instruções</code></dt>
<dd>As instruções que compõem o corpo da função.</dd>
</dl>
<h2 id="Descrição">Descrição</h2>
<p>Quando uma função assíncrona é chamada, ela retorna uma {{jsxref("Promise")}}. Quando a função assíncrona retorna um valor, a <code>Promise</code> será resolvida com o valor retornado. Quando a função assíncrona lança uma exceção ou algum valor, a <code>Promise</code> será rejeitada com o valor lançado.</p>
<p>Uma função assíncrona pode conter uma expressão {{jsxref("Operators/await", "await")}}, que pausa a execução da função assíncrona e espera pela resolução da <code>Promise </code>passada, e depois retoma a execução da função assíncrona e retorna o valor resolvido.</p>
<div class="note">
<p>A proposta das funções <code>async/await</code> é de simplificar o uso de forma síncrona das <code>Promises</code> e executar alguns procedimentos em um grupo de <code>Promises</code>. Assim como <code>Promises</code> são similares a <code>callbacks</code> estruturados, funções <code>async/await</code> são similares à junção de <code>generators</code> com <code>P</code><code>romises</code>.</p>
</div>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Exemplo_simples">Exemplo simples</h3>
<pre class="brush: js">function resolverDepoisDe2Segundos(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function adicionar1(x) {
var a = resolverDepoisDe2Segundos(20);
var b = resolverDepoisDe2Segundos(30);
return x + await a + await b;
}
adicionar1(10).then(v => {
console.log(v); // exibe 60 depois de 2 segundos.
});
async function adicionar2(x) {
var a = await resolverDepoisDe2Segundos(20);
var b = await resolverDepoisDe2Segundos(30);
return x + a + b;
}
adicionar2(10).then(v => {
console.log(v); // exibe 60 depois de 4 segundos.
});
</pre>
<h3 id="Reescrevendo_uma_cadeia_de_Promise_com_uma_função_async">Reescrevendo uma cadeia de <code>Promise</code> com uma função <code>async</code></h3>
<p>Uma API que retorna uma {{jsxref("Promise")}} vai resultar em uma cadeia de <code>Promises</code> e separa a função em várias partes. Considere o seguinte código:</p>
<pre class="brush: js">function pegarDadosProcessados(url) {
return baixarDados(url) // retorna uma Promise
.catch(e => {
return baixarDadosReservas(url) // retorna uma Promise
})
.then(v => {
return processarDadosNoWorker(v); // retorna uma Promise
});
}
</pre>
<p>pode ser escrita em uma única função <code>async</code> desta forma:</p>
<pre class="brush: js">async function pegarDadosProcessados(url) {
let v;
try {
v = await baixarDados(url);
} catch(e) {
v = await baixarDadosReservas(url);
}
return processarDadosNoWorker(v);
}
</pre>
<p>Note que no exemplo acima não tem a instrução <code>await</code> na instrução do <code>return</code>, porque o valor retornado de uma função <code>async é </code>implícitamente passado por um {{jsxref("Promise.resolve")}}.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Situação</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td>Definição inicial no ES2017.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<div>{{Compat("javascript.statements.async_function")}}</div>
<div id="compat-desktop"></div>
<h3 id="Notas_específicas_do_Firefox">Notas específicas do Firefox</h3>
<ul>
<li>A função <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Expression_closures">expression closure syntax</a> não é permitida com funções assíncronas e irão lançar a exceção <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a> a partir do Firefox 55.</li>
</ul>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/async_function">async_function</a></li>
<li><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction">AsyncFunction</a></li>
<li><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a></li>
</ul>
|
