aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/javascript/reference/operators/async_function/index.html
blob: fbd7674f47084b48aeb9e2bc0119ad959ee8b877 (plain)
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
151
152
---
title: Expressão da função async
slug: Web/JavaScript/Reference/Operators/async_function
tags:
  - Experimental
  - Expressão Primária
  - Função
  - Operador
translation_of: Web/JavaScript/Reference/Operators/async_function
---
<div>{{jsSidebar("Operators")}}</div>

<div>A palavra chave async pode ser usado para definir funções async dentro das expressões.</div>

<div>Você tambem pode definir funções async usando a declaração de função async.</div>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox">async function [<em>nome</em>]([<em>parametro1</em>[, <em>parametro2[</em>, ..., <em>parametroN</em>]]]) {
    <em>declarações</em>
}</pre>

<p>Como no  <a href="https://developer.mozilla.org/en-US/docs/">ES2015</a>, você tambem pode usar  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>.</p>

<h3 id="Parâmetros">Parâmetros</h3>

<dl>
 <dt><code>nome</code></dt>
 <dd>O nome da função.Pode ser omitida, na qual a função se torna anonima . O nome é somente local para o corpo da função.</dd>
 <dt><code>parametroN</code></dt>
 <dd>O nome do argumento passado para a função.</dd>
 <dt><code>declarações</code></dt>
 <dd>As declarações que compoem o corpo da função .</dd>
</dl>

<h2 id="Descrição">Descrição</h2>

<p>Uma expressão <code>async function</code> é muito similar, e tem quase a mesma sintaxe de uma {{jsxref('Statements/async_function', 'declaração async function')}}. A principal diferença entre uma expressão <code>async function </code>e uma declaração <code>async function</code> é o <em>nome da função</em><em>,</em> que pode ser omitido em expressões <code>async function</code> para criar <em>funções anônimas</em>. Uma expressão <code>async function</code> pode ser utilizada como um {{Glossary("IIFE")}} (Immediately Invoked Function Expression, em tradução livre: Expressão de Função Invocada Imediatamente) que roda assim que definido. Veja também o capítulo sobre <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funções</a> para mais informações.</p>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Exemplo_simples">Exemplo simples</h3>

<pre class="brush: js">function resolveAfter2Seconds(x) {
  return new Promise(resolve =&gt; {
    setTimeout(() =&gt; {
      resolve(x);
    }, 2000);
  });
};

(async function(x) { // async function expression usada como uma IIFE
  var a = resolveAfter2Seconds(20);
  var b = resolveAfter2Seconds(30);
  return x + await a + await b;
})(10).then(v =&gt; {
  console.log(v);  // imprime 60 após 2 segundo.
});

var add = async function(x) { // async function expression atribuída a uma variável
  var a = await resolveAfter2Seconds(20);
  var b = await resolveAfter2Seconds(30);
  return x + a + b;
};

add(10).then(v =&gt; {
  console.log(v);  // imprime 60 após 4 segundos.
});
</pre>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</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="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th> Edge</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(55)}}</td>
   <td>{{CompatGeckoDesktop("52.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera(42)}}</td>
   <td>{{CompatUnknown}}</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>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("52.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera(42)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(55)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>{{jsxref("Statements/async_function", "async function")}}</li>
 <li>{{jsxref("AsyncFunction")}} object</li>
 <li>{{jsxref("Operators/await", "await")}}</li>
</ul>