diff options
Diffstat (limited to 'files/pt-br/learn/javascript')
8 files changed, 578 insertions, 22 deletions
diff --git a/files/pt-br/learn/javascript/asynchronous/async_await/index.html b/files/pt-br/learn/javascript/asynchronous/async_await/index.html new file mode 100644 index 0000000000..dd6a558cfe --- /dev/null +++ b/files/pt-br/learn/javascript/asynchronous/async_await/index.html @@ -0,0 +1,556 @@ +--- +title: Tornando mais fácil a programação assíncrona com async e await +slug: Learn/JavaScript/Asynchronous/Async_await +translation_of: Learn/JavaScript/Asynchronous/Async_await +original_slug: Learn/JavaScript/Asynchronous/Async_await +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div> + +<p class="summary">Adições mais recentes à linguagem JavaScript são as <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function">funções assíncronas</a> e a palavra-chave <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a></code>, adicionadas no ECMAScript 2017. Esses recursos atuam basicamente como um syntactic sugar em cima de promises, tornando o código assíncrono mais fácil de escrever e ler. Isso faz com que o código assíncrono pareça mais com o código síncrono old-school, então vale a pena aprender. Este artigo fornece o que você precisa saber.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Conhecimento básico de informática, uma compreensão razoável dos fundamentos do JavaScript, uma compreensão de código assíncrono em geral e promises.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Entender o uso do async/await.</td> + </tr> + </tbody> +</table> + +<h2 id="O_basico_de_async_await">O básico de async/await</h2> + +<div><p>Existem duas formas de usar async/await no seu código.</p></div> + +<h3 id="A_palavra_chave_async">A palavra-chave async</h3> + +<div><p>Em primeiro lugar, temos a palavra-chave <code>async</code>, que você coloca antes de uma declaração de função para transformá-la em uma função assíncrona. Uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function">função assíncrona</a> é uma função que espera a possibilidade de a palavra-chave await ser usada para invocar código assíncrono.</p> + + <p>Experimente digitar as seguintes linhas no console JS do seu navegador.</p> + + <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div> + + <p>A funcão retorna "Hello" — nada de especial, certo?</p> + + <p>Mas o que acontece se transformar-mos isso em uma função assíncrona? Tente o seguinte:</p> + + <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div> + + <p>Ah. A invocação da função agora retorna uma promise. Isso é uma das características das funções assíncronas — seus valores de retorno são garantidos para serem convertidos em promises.</p> + + <p>Você também pode criar uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/async_function">expressão de função assíncrona</a>, assim:</p> + + <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div> + + <p>E você pode usar arrow functions:</p> + + <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div> + + <p>Tudo isso faz basicamente a mesma coisa.</p> + + <p>Para consumir o valor retornado quando a promise é finalizada, desde que esteja retornando uma promise, podemos usar um bloco <code>.then()</code>:</p> + + <div class="code-example"><pre class="brush: js notranslate"><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div> + + <p>ou mesmo de forma simplificada</p> + + <div class="code-example"><pre class="brush: js notranslate"><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div> + + <p>Como vimos no último artigo.</p> + + <p>Então a palavra-chave <code>async</code> é adicionada nas funções para dizer a elas para retornar uma promise ao invés de diretamente retornar uma valor.</p> + </div> + + <h3 id="A_palavra_chave_await">A palavra-chave await</h3> + + <div> + <p>A vantagem de uma função assíncrona só se torna aparente quando você a combina com a palavra-chave <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a>. <code>await</code> só funciona dentro de funções assíncronas no código JavaScript regular, no entanto, pode ser usado por conta própria com <a href="/pt-BR/docs/Web/JavaScript/Guide/Modules">JavaScript modules.</a></p> + + <p><code>await</code> pode ser colocado na frente de qualquer função assíncrona baseada em promise para pausar seu código nessa linha até que a promise seja resolvida e, em seguida, retornar o valor resultante.</p> + + <p>Você pode usar <code>await</code> quando chamar qualquer função que retorne uma Promise, incluindo funções de API web.</p> + + <p>Aqui está um exemplo comum:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> greeting <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"Hello"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>alert<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + + <p>Com certeza, o exemplo acima não é muito útil, porém serve para ilustrar a sintaxe. Vamos seguir em frente e ver um exemplo real.</p> + </div> + + <h2 id="Reescrevendo_codigo_baseado_em_promises_com_asyncawait">Reescrevendo código baseado em promises com async/await</a></h2> + + <div> + <p>Vejamos um exemplo simples de busca que vimos no artigo anterior:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">myBlob</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span> + document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + + <p>Por enquanto, você precisa ter um entendimento razoável das promises e como elas funcionam, mas vamos converter isso para usar async/await e ver o quão simples as coisas se tornam:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span> + document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + + <p>Isto faz o código muito mais simples and fácil de entender — sem mais blocos <code>.then()</code> em todo lugar!</p> + + <p>Visto que a palavra-chave <code>async</code> transforma a funcão em uma promise, você pode refatorar seu código para usar uma abordagem de promises e await, trazendo a segunda metade da funcão para um novo bloco e torná-la mais flexível:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token punctuation">}</span> + + <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span> + document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + + <p>Você pode tentar fazer o exemplo sozinho, ou rodar o nosso <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html" class="external" rel=" noopener">exemplo ao vivo</a> (veja também o<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html" class="external" rel=" noopener">código-fonte</a>).</p> + </div> + + <h3 id="but_how_does_it_work">Mas como isso funciona?</h3> + + <div> + <p>Você notará que empacotamos o código dentro de uma função, e incluímos a palavra-chave <code>async</code> antes da palavra-chave<code>function</code>. Isso é necessário — você tem que criar uma função assíncrona para definir o bloco de código no qual você executará seu código assíncrono; como falamos mais cedo, <code>await</code> só funciona dentro de funções assíncronas.</p> + + <p>Dentro da definição da função <code>myFetch()</code> você pode ver que o código se parece muito à versão anterior com promise, , mas tem algumas diferenças. Ao invés de precisar encadear um bloco <code>.then()</code> no final de cada método baseado em promise, você apenas adiciona a palavra-chave <code>await</code> antes de cada chamada de método, e então atribui o resultado a variável. A palavra-chave <code>await</code> faz com que o JavaScript pause seu código em tempo de execução nesta linha, não permitindo mais nenhum código ser executado nesse meio tempo até que a chamada de função assíncrona retorne seu resultado — muito útil se o código subsequente depender desse resultado!</p> + + <p>Assim que estiver completo, seu código continua a ser executado começando na próxima linha. Por exemplo:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + + <p>A resposta retornada pela promise <code>fetch()</code> preenchida é atribuída a variável <code>response</code> quando a resposta estiver disponível, e o parser pausa nesta linha até que isso ocorra. Uma vez que a resposta está disponível, o parser move para a próxima linha, o qual cria o <code><a href="/pt-BR/docs/Web/API/Blob">Blob</a></code> fora dele. Esta linha também invoca um método assíncrono baseado em promise, assim podemos usar <code>await</code> aqui também. Quando o resultado da operação retorna, retornamos isso fora da funcão <code>myFetch()</code>.</p> + + <p>Isso significa que quando nós chamamos a função <code>myFetch()</code>, isso retorna uma promise, então podemos encadear um <code>.then()</code> no final, dentro do qual lidamos com a exibição do blob na tela.</p> + + <p>Provavelmente você já está pensando "isso é realmente demais!", e você está certo — menos blocos <code>.then()</code> para envolver o código, e quase sempre se parece com um código síncrono, por isso é muito intuitivo.</p> + </div> + + <h3 id="adding_error_handling">Adicionando tratamento de erros</h3> + + <div> + <p>E se você deseja adicionar tratamento de erros, você tem algumas opções.</p> + + <p>Você pode usar uma estrutura <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> síncrona com <code>async</code>/<code>await</code>. Este exemplo se expande da primeira versão do código que mostramos acima:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">try</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span> + document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + + <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + + <p>Ao bloco <code>catch() {}</code> é passado um objeto de erro, qual nós chamamos <code>e</code>; agora podemos registrar isso no console, e isso nos fornecerá uma mensagem de erro detalhada mostrando onde o erro foi gerado no código.</p> + + <p>Se você quiser usar a segunda versão (refatorada) do código que mostramos acima, seria melhor apenas continuar a abordagem híbrida e encadear um bloco <code>.catch()</code> no final da chamada <code>.then()</code>, dessa forma:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token punctuation">}</span> + + <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span> + document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + + <p>Isso ocorre porque o bloco <code>.catch()</code> vai pegar os erros que ocorrem em ambos, na chamada de função com async e com cadeia de promises. Se você usou bloco <code>try</code>/<code>catch</code> aqui, você ainda pode obter erros não tratados na função <code>myFetch()</code> quando ela for chamada.</p> + + <p>Você pode encontrar esses dois exemplos no GitHub:</p> + + <ul> + <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html" class="external" rel=" noopener">simple-fetch-async-await-try-catch.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html" class="external" rel=" noopener">código-fonte</a>)</li> + <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html" class="external" rel=" noopener">simple-fetch-async-await-promise-catch.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html" class="external" rel=" noopener">código-fonte</a>)</li> + </ul> + </div> + + <h2 id="awaiting_a_promise.all">Esperando um Promise.all()</h2> + + <div> + <p>async/await é construído em cima de <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, por isso é compatível com todos os recursos oferecidos por promises. Isso inclui <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — você pode esperar felizmente uma chamada <code>Promise.all()</code> para obter todos os resultados retornados em uma variável de uma forma que se pareça com um código síncrono simples. De novo, vamos voltar para <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html" class="external" rel=" noopener">um exemplo que vimos em nosso artigo anterior</a>. Mantenha-o aberto em uma guia separada para que você possa comparar e contrastar com a nova versão mostrada abaixo.</p> + + <p>Convertendo este para async/await (veja <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html" class="external" rel=" noopener">demonstração ao vivo</a> e <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html" class="external" rel=" noopener">código-fonte</a>), isso agora parece assim:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">let</span> content<span class="token punctuation">;</span> + + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'blob'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + content <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'text'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + content <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + + <span class="token keyword">return</span> content<span class="token punctuation">;</span> + + + <span class="token punctuation">}</span> + + <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">displayContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> coffee <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">,</span> <span class="token string">'blob'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> tea <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'tea.jpg'</span><span class="token punctuation">,</span> <span class="token string">'blob'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> description <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'description.txt'</span><span class="token punctuation">,</span> <span class="token string">'text'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>coffee<span class="token punctuation">,</span> tea<span class="token punctuation">,</span> description<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">let</span> objectURL1 <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> objectURL2 <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> descText <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span> + + <span class="token keyword">let</span> image1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> image2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + image1<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL1<span class="token punctuation">;</span> + image2<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL2<span class="token punctuation">;</span> + document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image1<span class="token punctuation">)</span><span class="token punctuation">;</span> + document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image2<span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">let</span> para <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + para<span class="token punctuation">.</span>textContent <span class="token operator">=</span> descText<span class="token punctuation">;</span> + document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>para<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token function">displayContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + + <p>Você notará que a função <code>fetchAndDecode()</code> foi convertida facilmente em uma função assíncrona com apenas algumas alterações. Veja a linha do <code>Promise.all()</code>:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>coffee<span class="token punctuation">,</span> tea<span class="token punctuation">,</span> description<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + + <p>Usando <code>await</code> aqui podemos obter todos os resultados das três promises retornadas no array <code>values</code>, quando todos eles estão disponíveis, de uma forma que se parece muito com o código síncrono. Tivemos que envolver todo o código em uma nova função assíncrona, <code>displayContent()</code>, e não reduzimos o código em muitas linhas, mas ser capaz de mover a maior parte do código para fora do bloco <code>.then()</code> fornece uma simplificação agradável e útil, deixando-nos com um programa muito mais legível.</p> + + <p>Para tratamento de erros, nós incluímos um bloco <code>.catch()</code> no nossa chamada <code>displayContent()</code>; isso vai lidar com os erros que ocorrem em ambas as funções.</p> + + <div class="notecard note"> + <p><strong>Nota</strong>: Também é possível usar um bloco <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> síncrono na função assíncrona, no lugar de um bloco assíncrono<code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code>, para mostrar um relatório final sobre como foi a operação — você pode ver isso em ação no nosso <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html" class="external" rel=" noopener">exemplo ao vivo</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html" class="external" rel=" noopener">código-fonte</a>).</p> + </div> + </div> + + <h2 id="handling_asyncawait_slowdown">Tratando lentidão com async/await</h2> + + <div> + <p>Async/await faz seu código parecer síncrono e, de certa forma, faz com que se comporte de maneira mais síncrona. A palavra-chave <code>await</code> bloqueia a execução de todo o código que o segue até que a promise seja cumprida, exatamente como faria com uma operação síncrona. Ele permite que outras tarefas continuem sendo executadas enquanto isso, mas o código com await é bloqueado. Por exemplo:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">makeResult</span><span class="token punctuation">(</span><span class="token parameter">items</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> + <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + newArr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'word_'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">return</span> newArr<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getResult</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">makeResult</span><span class="token punctuation">(</span>items<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Blocked on this line</span> + <span class="token function">useThatResult</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Will not be executed before makeResult() is done</span> + <span class="token punctuation">}</span> + + </code></pre></div> + + <p>Como resultado, seu código pode ser retardado por um número significativo de promises aguardadas acontecendo uma após a outra. Cada <code>await</code> vai esperar que o anterior termine, ao passo que, na verdade, o que você pode querer é que as promises comecem a ser processadas simultaneamente, como fariam se não estivéssemos usando async/await.</p> + + <p>Vejamos esses dois exemplos — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html" class="external" rel=" noopener">slow-async-await.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html" class="external" rel=" noopener">código-fonte</a>) e <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html" class="external" rel=" noopener">fast-async-await.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html" class="external" rel=" noopener">código-fonte</a>). Ambos começam com uma função promise personalizada que simula um processo assíncrono com uma chamada <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"done"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> + + <p>Cada um deles inclui uma função assíncrona <code>timeTest()</code> que espera três chamadas <code>timeoutPromise()</code>:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token operator">...</span> + <span class="token punctuation">}</span></code></pre></div> + + <p>Cada um termina registrando um horário de início, vendo quanto tempo a promise <code>timeTest()</code> leva para completar, em seguida, registrando um horário de término e relatando quanto tempo a operação levou no total:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span> + <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div> + + <p>Isso é a função <code>timeTest()</code> que difere em cada caso.</p> + + <p>No exemplo <code>slow-async-await.html</code>, <code>timeTest()</code> se parece com isso:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span></code></pre></div> + + <p>Aqui esperamos diretamente todas as três chamadas <code>timeoutPromise()</code>, fazendo cada uma a cada 3 segundos. Cada chamada subsequente é forçada a esperar até que a última termine — se você executar o primeiro exemplo, você verá a caixa de alerta relatando um tempo total de execução de cerca de 9 segundos.</p> + + <p>No exemplo <code>fast-async-await.html</code>, <code>timeTest()</code> se parece com isso:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> timeoutPromise1 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> timeoutPromise2 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> timeoutPromise3 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">await</span> timeoutPromise1<span class="token punctuation">;</span> + <span class="token keyword">await</span> timeoutPromise2<span class="token punctuation">;</span> + <span class="token keyword">await</span> timeoutPromise3<span class="token punctuation">;</span> + <span class="token punctuation">}</span></code></pre></div> + + <p>Aqui nós armazenamos os três objetos <code>Promise</code> em variáveis, que tem o efeito de desencadear seus processos associados, todos rodando simultaneamente.</p> + + <p>A seguir, aguardamos seus resultados — porque todas as promises começaram a ser processadas essencialmente ao mesmo tempo, as promises serão cumpridas todas ao mesmo tempo; ao executar o segundo exemplo, você verá a caixa de alerta relatando um tempo total de execução de pouco mais de 3 segundos!</p> + </div> + + <h3 id="handling_errors">Tratamento de erros</h3> + + <div> + <p>Há um problema com o padrão acima, no entanto — pode levar a erros não tratados.</p> + + <p>Vamos atualizar os exemplos anteriores, desta vez adicionando uma promise rejeitada e uma declaração <code>catch</code> no final:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">await</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">await</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">await</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span> + <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div> + + <p>No exemplo acima, o erro é tratado corretamente, e o alerta aparece após aproximadamente 7 segundos.</p> + + <p>Agora no segundo padrão:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> timeoutPromiseResolve1 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> timeoutPromiseReject2 <span class="token operator">=</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> timeoutPromiseResolve3 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">await</span> timeoutPromiseResolve1<span class="token punctuation">;</span> + <span class="token keyword">await</span> timeoutPromiseReject2<span class="token punctuation">;</span> + <span class="token keyword">await</span> timeoutPromiseResolve3<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span> + <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div> + + <p>Neste exemplo, temos um erro não tratado no console (depois de 2 segundos), e o alerta aparece após aproximadamente 5 segundos.</p> + + <p>Para iniciar as promises em paralelo e detectar o erro corretamente, nós poderíamos usar <code>Promise.all()</code>, como discutido anteriormente:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> timeoutPromiseResolve1 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> timeoutPromiseReject2 <span class="token operator">=</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> timeoutPromiseResolve3 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">const</span> results <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>timeoutPromiseResolve1<span class="token punctuation">,</span> timeoutPromiseReject2<span class="token punctuation">,</span> timeoutPromiseResolve3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> results<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span> + <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div> + + <p>Neste exemplo, o erro é tratado corretamente após aproximadamente 2 segundos e também vemos o alerta após aproximadamente 2 segundos.</p> + + <p>A <code>Promise.all()</code> rejeita quando qualquer uma das promises de entrada é rejeitada. Se você deseja que todas as promises sejam cumpridas e, em seguida, usar alguns de seus valores retornados, mesmo quando alguns deles são rejeitados, você pode usar <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled"><code>Promise.allSettled()</code></a>.</p> + </div> + + <h2 id="asyncawait_class_methods">Async/await em métodos de classe</a></h2> + + <div> + <p>Como nota final, antes de prosseguirmos, você pode até adicionar <code>async</code> na frente de métodos de classe / objeto para fazê-los retornar promises, e <code>await</code> promises dentro deles. Dê uma olhada no artigo <a href="/pt-BR/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">Código de classe ES que vimos em nosso JavaScript orientado a objetos</a>. em seguida, olhe para nossa versão modificada com um método <code>async</code>:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span> + <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">first<span class="token punctuation">,</span> last<span class="token punctuation">,</span> age<span class="token punctuation">,</span> gender<span class="token punctuation">,</span> interests</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token punctuation">{</span> + first<span class="token punctuation">,</span> + last + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span> + <span class="token keyword">this</span><span class="token punctuation">.</span>gender <span class="token operator">=</span> gender<span class="token punctuation">;</span> + <span class="token keyword">this</span><span class="token punctuation">.</span>interests <span class="token operator">=</span> interests<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">async</span> <span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi! I'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token function">farewell</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> has left the building. Bye for now!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">let</span> han <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'Han'</span><span class="token punctuation">,</span> <span class="token string">'Solo'</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'male'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Smuggling'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + + <p>O primeiro método da classe agora pode ser usado assim:</p> + + <div class="code-example"><pre class="brush: js notranslate"><code>han<span class="token punctuation">.</span><span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> + </div> + + <h2 id="browser_support"><a href="#browser_support" title="Permalink to Browser support">Suporte de navegador</a></h2> + + <div> + <p>Uma consideração ao decidir se deve usar async/await é o suporte para navegadores mais antigos. Eles estão disponíveis em versões modernas da maioria dos navegadores, o mesmo que promises; os principais problemas de suporte vêm com o Internet Explorer e o Opera Mini.</p> + + <p>Se você deseja usar async/await, mas está preocupado com o suporte a navegadores mais antigos, pode considerar o uso da biblioteca <a href="https://babeljs.io/" class="external" rel=" noopener">BabelJS</a> — isso permite que você escreva seus aplicativos usando o JavaScript mais recente e deixe Babel descobrir quais mudanças, se houver, são necessárias para os navegadores de seu usuário. Ao encontrar um navegador que não suporta async/await, o polyfill do Babel pode fornecer automaticamente substitutos que funcionam em navegadores mais antigos.</p> + </div> + + <h2 id="Conclusao">Conclusão</h2> + + <p>E aí está - async/await fornecem uma maneira agradável e simplificada de escrever código assíncrono que é mais simples de ler e manter. Mesmo com o suporte do navegador sendo mais limitado do que outros mecanismos de código assíncrono no momento da escrita, vale a pena aprender e considerar o uso, agora e no futuro.</p> + + <p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p> + + <h2 id="Neste_modulo">Neste módulo</h2> + + <ul> + <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Concepts">Conceitos gerais da programação assíncrona</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Introducing">Introdução ao JavaScript Async</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Timeouts e intervalos</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Promises">Programação elegante com Promises</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Escolhendo a abordagem correta</a></li> + </ul> +</div>
\ No newline at end of file diff --git a/files/pt-br/learn/javascript/building_blocks/conditionals/index.html b/files/pt-br/learn/javascript/building_blocks/conditionals/index.html index 6f110ad3e0..189781c609 100644 --- a/files/pt-br/learn/javascript/building_blocks/conditionals/index.html +++ b/files/pt-br/learn/javascript/building_blocks/conditionals/index.html @@ -612,6 +612,6 @@ window.addEventListener('load', updateCode); <h2 id="Teste_suas_habilidades!">Teste suas habilidades!</h2> -<p>Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Teste suas habilidades: Condicionais</a>.</p> +<p>Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Teste suas habilidades: Condicionais</a>.</p> <p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p> diff --git a/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html index ad934caa43..4197b0aa26 100644 --- a/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ b/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -14,7 +14,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage <tbody> <tr> <th scope="row">Pré-requisitos:</th> - <td>Noções básicas de JavaScript (consulte as <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">primeiras etapas </a><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps"> </a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">blocos de construção</a> , <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">objetos JavaScript</a> ), as <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">noções básicas de APIs do lado do cliente</a></td> + <td>Noções básicas de JavaScript (consulte as <a href="/en-US/docs/Learn/JavaScript/First_steps">primeiras etapas </a><a href="/en-US/docs/Learn/JavaScript/First_steps"> </a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">blocos de construção</a> , <a href="/en-US/docs/Learn/JavaScript/Objects">objetos JavaScript</a> ), as <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">noções básicas de APIs do lado do cliente</a></td> </tr> <tr> <th scope="row">Objetivo:</th> @@ -25,7 +25,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage <h2 id="Armazenamento_do_lado_do_cliente">Armazenamento do lado do cliente?</h2> -<p>Em outro lugar na área de aprendizagem MDN, falamos sobre a diferença entre <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites estáticos</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dinâmicos</a> . A maioria dos principais sites modernos são dinâmicos - eles armazenam dados no servidor usando algum tipo de banco de dados (armazenamento do lado do servidor) e, em seguida, executam o código do <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">lado do servidor</a> para recuperar os dados necessários, inserem-nos em modelos de página estática e fornecem o HTML resultante para o cliente a ser exibido pelo navegador do usuário.er.</p> +<p>Em outro lugar na área de aprendizagem MDN, falamos sobre a diferença entre <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites estáticos</a> e <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dinâmicos</a> . A maioria dos principais sites modernos são dinâmicos - eles armazenam dados no servidor usando algum tipo de banco de dados (armazenamento do lado do servidor) e, em seguida, executam o código do <a href="/en-US/docs/Learn/Server-side">lado do servidor</a> para recuperar os dados necessários, inserem-nos em modelos de página estática e fornecem o HTML resultante para o cliente a ser exibido pelo navegador do usuário.er.</p> <p>O armazenamento do lado do cliente funciona em princípios semelhantes, mas tem usos diferentes. Consiste em APIs JavaScript que permitem armazenar dados no cliente (ou seja, na máquina do usuário) e recuperá-los quando necessário. Isso tem muitos usos distintos, como:</p> @@ -39,7 +39,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage <p>Freqüentemente, o armazenamento do lado do cliente e do lado do servidor são usados juntos. Por exemplo, você pode baixar um lote de arquivos de música (talvez usados por um jogo da web ou aplicativo de reprodutor de música), armazená-los em um banco de dados do cliente e reproduzi-los conforme necessário. O usuário só teria que baixar os arquivos de música uma vez - em visitas subsequentes, eles seriam recuperados do banco de dados.</p> <div class="note"> -<p><strong>Nota</strong> : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consulte <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Limites de armazenamento do navegador e critérios de despejo</a> para obter mais informações..</p> +<p><strong>Nota</strong> : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consulte <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Limites de armazenamento do navegador e critérios de despejo</a> para obter mais informações..</p> </div> <h3 id="Old_school_Cookies">Old school: Cookies</h3> diff --git a/files/pt-br/learn/javascript/client-side_web_apis/index.html b/files/pt-br/learn/javascript/client-side_web_apis/index.html index cb2fe46cd9..854ecb4ff7 100644 --- a/files/pt-br/learn/javascript/client-side_web_apis/index.html +++ b/files/pt-br/learn/javascript/client-side_web_apis/index.html @@ -32,7 +32,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs <h2 id="Guias">Guias</h2> <dl> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introdução a APIs para a web</a></dt> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introdução a APIs para a web</a></dt> <dd>Primeiro, vamos começar com apis de alto nível — o que elas são, como elas funcionam, quando usar no seu código, como elas são estruturadas? Nós veremos diferentes tipos de classses principais e o que elas são, e quais são as possibilidades de uso.</dd> <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulando documentos</a></dt> <dd>Quando estiver codificando páginas da web ou aplicações, uma das coisas mais comuns que você irá fazer será manipular documentos da web de alguma forma. Normalmente isso é feito usando o Document Object Model (DOM), um conjunto de APIs para controlar o HTML e a informação sobre os estilos que usa fortemente o objeto {{domxref("Document")}}. Neste artigo vamos ver como usar o DOM em detalhes, juntamente com outras APIs interessantes que podem alterar seu ambiente de desenvolvimento de modos interessantes.</dd> diff --git a/files/pt-br/learn/javascript/first_steps/variables/index.html b/files/pt-br/learn/javascript/first_steps/variables/index.html index 88b45eaf8f..73cef40bcd 100644 --- a/files/pt-br/learn/javascript/first_steps/variables/index.html +++ b/files/pt-br/learn/javascript/first_steps/variables/index.html @@ -310,7 +310,7 @@ const horasNoDia = 24;</span></span></span></span></pre> <h2 id="Teste_suas_habilidades!">Teste suas habilidades!</h2> -<p>Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você reteve essas informações antes de prosseguir — veja <a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Teste_suas_habilidades:_variaveis">Teste suas habilidades: variáveis</a>.</p> +<p>Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você reteve essas informações antes de prosseguir — veja <a href="/pt-BR/docs/Learn/JavaScript/First_steps/Teste_suas_habilidades:_variaveis">Teste suas habilidades: variáveis</a>.</p> <h2 id="Sumário">Sumário</h2> @@ -321,13 +321,13 @@ const horasNoDia = 24;</span></span></span></span></pre> <h2 id="Neste_módulo">Neste módulo</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript">O que é JavaScript?</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/A_first_splash">Um primeiro mergulho no JavaScript</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/What_went_wrong">O que deu errado? Resolvendo problemas no JavaScript</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Vari%C3%A1veis">Armazenando as informações que você precisa — Variáveis</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Matematica">Matemática básica no JavaScript — números e operadores</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Strings">Trabalhando com textos — strings em JavaScript</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos úteis de string</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Gerador_de_historias_bobas">Avaliação: Gerador de histórias bobas</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript">O que é JavaScript?</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/A_first_splash">Um primeiro mergulho no JavaScript</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/What_went_wrong">O que deu errado? Resolvendo problemas no JavaScript</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Vari%C3%A1veis">Armazenando as informações que você precisa — Variáveis</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Matematica">Matemática básica no JavaScript — números e operadores</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Strings">Trabalhando com textos — strings em JavaScript</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos úteis de string</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Gerador_de_historias_bobas">Avaliação: Gerador de histórias bobas</a></li> </ul> diff --git a/files/pt-br/learn/javascript/index.html b/files/pt-br/learn/javascript/index.html index 2d0226b691..9a3f199b62 100644 --- a/files/pt-br/learn/javascript/index.html +++ b/files/pt-br/learn/javascript/index.html @@ -41,15 +41,15 @@ original_slug: Aprender/JavaScript <p>Este tópico contém os seguintes módulos, em uma ordem que sugerimos para estudá-los.</p> <dl> - <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a></dt> + <dt><a href="/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a></dt> <dd>Em nosso primeiro módulo JavaScript, primeiro responderemos algumas questões fundamentais como "o que é JavaScript?", "Como ele se parece?" E "o que ele pode fazer?", antes de passar para sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos alguns recursos chave do JavaScript em detalhes, como variáveis, cadeias de caracteres, números e matrizes.</dd> - <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Blocos de codigo JavaScript</a></dt> + <dt><a href="/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Blocos de codigo JavaScript</a></dt> <dd>Neste módulo, continuaremos a falar sobre os principais recursos fundamentais do JavaScript, voltando nossa atenção para os tipos mais comuns de blocos de código<strong>,</strong> como instruções condicionais, funções e eventos. Você já viu essas coisas no curso, mas apenas de passagem, aqui discutiremos tudo explicitamente.</dd> - <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em JavaScript</a></dt> + <dt><a href="/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em JavaScript</a></dt> <dd>Em JavaScript, a maioria das coisas são objetos, desde seus principais recursos até as APIs do navegador. Você pode até criar seus próprios objetos.É importante entender a natureza orientada a objetos do JavaScript se você quiser ir mais longe com seu conhecimento da linguagem e escrever um código mais eficiente, portanto, fornecemos este módulo para ajudá-lo. Aqui ensinamos a teoria e a sintaxe de objetos em detalhes, observamos como criar seus próprios objetos e explicamos quais são os dados JSON e como trabalhar com eles.</dd> - <dt><strong><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Asynchronous">JavaScript Assíncrono</a></strong></dt> + <dt><strong><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous">JavaScript Assíncrono</a></strong></dt> <dd>Neste módulo, examinamos o JavaScript assíncrono, por que é importante e como ele pode ser usado para lidar efetivamente com possíveis operações de bloqueio, como a busca de recursos de um servidor.</dd> - <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Client-side_web_APIs">API's Web do lado cliente</a></dt> + <dt><a href="/pt-BR/docs/Aprender/JavaScript/Client-side_web_APIs">API's Web do lado cliente</a></dt> <dd>Ao escrever JavaScript para sites ou aplicativos da Web, você não vai muito longe antes de começar a usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou até dados de outros sites ou serviços. Neste módulo, vamos explorar o que são as APIs e como usar algumas das APIs mais comuns que você encontrará com frequência em seu trabalho de desenvolvimento.</dd> </dl> diff --git a/files/pt-br/learn/javascript/objects/basics/index.html b/files/pt-br/learn/javascript/objects/basics/index.html index 340fc9dd82..ab5da689b9 100644 --- a/files/pt-br/learn/javascript/objects/basics/index.html +++ b/files/pt-br/learn/javascript/objects/basics/index.html @@ -236,7 +236,7 @@ var meuVideo = document.querySelector('video');</pre> <h2 id="Teste_suas_habilidades_!">Teste suas habilidades !</h2> -<p>Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante — veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p> +<p>Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante — veja <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p> <h2 id="Resumo">Resumo</h2> diff --git a/files/pt-br/learn/javascript/objects/json/index.html b/files/pt-br/learn/javascript/objects/json/index.html index 3f28b6d5ab..2db3354e1a 100644 --- a/files/pt-br/learn/javascript/objects/json/index.html +++ b/files/pt-br/learn/javascript/objects/json/index.html @@ -19,7 +19,7 @@ original_slug: Aprender/JavaScript/Objetos/JSON <tr> <th scope="row">Pré-requisitos</th> <td> - <p>Conhecimento básico em informática, conhecimento básico de HTML e CSS, conhecimento básico de JavaScript veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>) e o básico de OOJS (veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução a objetos</a>).</p> + <p>Conhecimento básico em informática, conhecimento básico de HTML e CSS, conhecimento básico de JavaScript veja <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>) e o básico de OOJS (veja <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução a objetos</a>).</p> </td> </tr> <tr> |