diff options
Diffstat (limited to 'files/pt-br/learn')
18 files changed, 597 insertions, 41 deletions
diff --git a/files/pt-br/learn/accessibility/index.html b/files/pt-br/learn/accessibility/index.html index 0c34fc5f4c..774cb527e9 100644 --- a/files/pt-br/learn/accessibility/index.html +++ b/files/pt-br/learn/accessibility/index.html @@ -19,7 +19,7 @@ translation_of: Learn/Accessibility --- <div>{{LearnSidebar}}</div> -<p class="summary">Aprender HTML, CSS e Javascript é útil se você quer se tornar um desenvolvedor web, mas seu conhecimento precisa ir além. Você deve usá-las de forma a maximizar a audiencia dos seus sites, e permitir que todos possam acessar o conteúdo. Para conseguir isso, será necessário seguir boas práticas, realizar testes em vários navegadores (<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>) e pensar em acessibilidade desde o início do desenvolvimento. Este módulo abordará a acessibilidade em detalhes.</p> +<p class="summary">Aprender HTML, CSS e Javascript é útil se você quer se tornar um desenvolvedor web, mas seu conhecimento precisa ir além. Você deve usá-las de forma a maximizar a audiencia dos seus sites, e permitir que todos possam acessar o conteúdo. Para conseguir isso, será necessário seguir boas práticas, realizar testes em vários navegadores (<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>) e pensar em acessibilidade desde o início do desenvolvimento. Este módulo abordará a acessibilidade em detalhes.</p> <h2 id="Visão_geral">Visão geral</h2> @@ -39,7 +39,7 @@ translation_of: Learn/Accessibility <h2 id="Prerequisitos">Prerequisitos</h2> -<p>Para ter o máximo proveito deste módulo, recomendamos que esteja familiarizados com pelos os dois primeiros módulos de <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, ou melhor ainda, com as partes principais do módulo de acessibilidade de cada capítulo, à medida em que vai estudando.</p> +<p>Para ter o máximo proveito deste módulo, recomendamos que esteja familiarizados com pelos os dois primeiros módulos de <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, ou melhor ainda, com as partes principais do módulo de acessibilidade de cada capítulo, à medida em que vai estudando.</p> <div class="note"> <p><strong>Nota</strong>: Se você está estudando em um dispositivo que não pode criar novos arquivos, voce pode testar os exemplos em alguma aplicação de codificação online, como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> diff --git a/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html index bd6ddd381b..de86333e93 100644 --- a/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html @@ -149,7 +149,7 @@ original_slug: Aprender/Getting_started_with_the_web/HTML_basico <p>Agora, tente adicionar um título adequado à sua página HTML logo acima do elemento {{htmlelement("img")}}.</p> <div class="blockIndicator note"> -<p><strong>Nota</strong>: Você verá que seu nível de cabeçalho 1 tem um estilo implícito. Não use elementos de cabeçalho para aumentar ou negritar o texto, pois eles são usados para <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">acessibilidade</a> e <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">outros motivos, como SEO</a>. Tente criar uma sequência significativa de títulos em suas páginas, sem pular os níveis.</p> +<p><strong>Nota</strong>: Você verá que seu nível de cabeçalho 1 tem um estilo implícito. Não use elementos de cabeçalho para aumentar ou negritar o texto, pois eles são usados para <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">acessibilidade</a> e <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">outros motivos, como SEO</a>. Tente criar uma sequência significativa de títulos em suas páginas, sem pular os níveis.</p> </div> <h3 id="Parágrafo">Parágrafo</h3> diff --git a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html index 68b897a9a6..5bd53a3318 100644 --- a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html @@ -101,7 +101,7 @@ meuCabecalho.textContent = 'Ola mundo!';</pre> </div> <div class="note"> -<p><strong>Nota</strong>: Para mais detalhes sobre a diferença entre <code>var</code> e <code>let</code>, veja<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let"> A diferença entre var e let</a>.</p> +<p><strong>Nota</strong>: Para mais detalhes sobre a diferença entre <code>var</code> e <code>let</code>, veja<a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let"> A diferença entre var e let</a>.</p> </div> <p>Depois de declarar uma variável, você pode dar a ela um valor:</p> diff --git a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index ae9111133f..7b16c8b0a2 100644 --- a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -119,7 +119,7 @@ original_slug: Aprender/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Cada elemento <code><source></code> também tem um atributo {{htmlattrxref("type", "source")}}. Isso é opcional, mas é recomendável que você os inclua - eles contêm o {{glossary("MIME type","MIME types")}} dos arquivos de vídeo, e os navegadores podem lê-los e pular imediatamente os vídeos que não entendem. Se não estiverem incluídos, os navegadores carregarão e tentarão reproduzir cada arquivo até encontrar um que funcione, consumindo ainda mais tempo e recursos.</p> <div class="note"> -<p><strong>Nota</strong>: Consulte o nosso <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">guia sobre tipos e formatos de mídias</a> (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada</p> +<p><strong>Nota</strong>: Consulte o nosso <a href="/en-US/docs/Web/Media/Formats">guia sobre tipos e formatos de mídias</a> (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada</p> </div> <h3 id="Outros_recursos_de_<video>">Outros recursos de <video></h3> @@ -220,7 +220,7 @@ mediaElem.audioTracks.onaddtrack = function(event) { <li>Da mesma forma, em ambientes em que a reprodução do áudio seria uma distração ou perturbação (como em uma biblioteca ou quando um parceiro está tentando dormir), ter legendas pode ser muito útil.</li> </ul> -<p>Não seria bom poder fornecer a essas pessoas uma transcrição das palavras que estão sendo ditas no áudio / vídeo? Bem, graças ao vídeo HTML5, você pode, com o formato <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT </a>e o elemento {{htmlelement ("track")}}.</p> +<p>Não seria bom poder fornecer a essas pessoas uma transcrição das palavras que estão sendo ditas no áudio / vídeo? Bem, graças ao vídeo HTML5, você pode, com o formato <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT </a>e o elemento {{htmlelement ("track")}}.</p> <div class="note"> <p><strong>Nota</strong>: "Transcrever" significa "escrever as palavras faladas como texto". O texto resultante é uma "transcrição".</p> @@ -271,7 +271,7 @@ This is the second. <p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> -<p>Para mais detalhes, leia <a href="https://wiki.developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>. Você pode <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">encontrar o exemplo</a> que acompanha este artigo no Github, escrito por Ian Devlin (consulte o <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">código-fonte</a> também.) Este exemplo usa algum JavaScript para permitir que os usuários escolham entre diferentes legendas. Observe que, para ativar as legendas, você precisa pressionar o botão "CC" e selecionar uma opção - inglês, alemão ou espanhol.</p> +<p>Para mais detalhes, leia <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>. Você pode <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">encontrar o exemplo</a> que acompanha este artigo no Github, escrito por Ian Devlin (consulte o <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">código-fonte</a> também.) Este exemplo usa algum JavaScript para permitir que os usuários escolham entre diferentes legendas. Observe que, para ativar as legendas, você precisa pressionar o botão "CC" e selecionar uma opção - inglês, alemão ou espanhol.</p> <div class="note"> <p><strong>Nota</strong>: As faixas de texto também ajudam você com o {{glossary ("SEO")}}, pois os mecanismos de pesquisa prosperam especialmente no texto. As trilhas de texto permitem até que os mecanismos de pesquisa sejam vinculados diretamente a um ponto no meio do vídeo.</p> @@ -303,11 +303,11 @@ This is the second. <ul> <li>Os elementos de mídia HTML: {{htmlelement("audio")}}, {{htmlelement("video")}}, {{htmlelement("source")}}, {{htmlelement("track")}}.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media">Tecnologias de mídia da Web</a>.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">Guia para tipos e formatos de mídia na Web</a>.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Entrega de áudio e vídeo:</a> muitos detalhes sobre como colocar áudio e vídeo em páginas da Web usando HTML e JavaScript.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipulação de áudio e vídeo:</a> muitos detalhes sobre a manipulação de áudio e vídeo usando JavaScript (por exemplo, adicionando filtros).</li> + <li><a href="/en-US/docs/Web/Media">Tecnologias de mídia da Web</a>.</li> + <li><a href="/en-US/docs/Web/Media/Formats">Guia para tipos e formatos de mídia na Web</a>.</li> + <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>.</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Entrega de áudio e vídeo:</a> muitos detalhes sobre como colocar áudio e vídeo em páginas da Web usando HTML e JavaScript.</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipulação de áudio e vídeo:</a> muitos detalhes sobre a manipulação de áudio e vídeo usando JavaScript (por exemplo, adicionando filtros).</li> <li>Opções automatizadas para <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">traduzir multimídia.</a></li> </ul> diff --git a/files/pt-br/learn/index.html b/files/pt-br/learn/index.html index 9c76dd4242..954b677386 100644 --- a/files/pt-br/learn/index.html +++ b/files/pt-br/learn/index.html @@ -37,7 +37,7 @@ original_slug: Aprender </ul> <div class="note"> -<p><strong>Nota</strong>: Nosso <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario">glossário</a> fornece definições de terminologia.</p> +<p><strong>Nota</strong>: Nosso <a href="/pt-BR/docs/Glossario">glossário</a> fornece definições de terminologia.</p> </div> <p>{{LearnBox({"title":"Entrada aleatória do glossário"})}}</p> 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> diff --git a/files/pt-br/learn/server-side/django/deployment/index.html b/files/pt-br/learn/server-side/django/deployment/index.html index 1c4b766923..4ab5fde0b2 100644 --- a/files/pt-br/learn/server-side/django/deployment/index.html +++ b/files/pt-br/learn/server-side/django/deployment/index.html @@ -108,7 +108,7 @@ original_slug: Learn/Server-side/Django/Hospedagem <h2 id="Preparando_seu_site_para_publicação">Preparando seu site para publicação</h2> -<p>O <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/Django/skeleton_website">esqueleto do site do Django</a> criado usando as ferramentas django-admin e manage.py é configurado para tornar o desenvolvimento mais fácil. Muitas das configurações do projeto Django (especificadas em settings.py) devem ser diferentes para produção, por motivos de segurança ou desempenho.</p> +<p>O <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">esqueleto do site do Django</a> criado usando as ferramentas django-admin e manage.py é configurado para tornar o desenvolvimento mais fácil. Muitas das configurações do projeto Django (especificadas em settings.py) devem ser diferentes para produção, por motivos de segurança ou desempenho.</p> <div class="note"> <p><strong>Dica:</strong> É comum ter um arquivo <strong>settings.py</strong> separado para produção e importar configurações confidenciais de um arquivo separado ou de uma variável de ambiente. Este arquivo deve ser protegido, mesmo se o resto do código-fonte estiver disponível em um repositório público.</p> diff --git a/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html b/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html index 57dd82946d..7cf8e52177 100644 --- a/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html +++ b/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html @@ -34,7 +34,7 @@ translation_of: Learn/Server-side/First_steps/Client-Server_overview <h2 id="Web_servers_e_HTTP_uma_introdução">Web servers e HTTP (uma introdução)</h2> -<p>Navegadores Web se comunicam com <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server">servidores Web</a> usando o <strong>H</strong>yper<strong>T</strong>ext<strong>T</strong>ransfer <strong>P</strong>rotocol (<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a>). Quando você clica em um link em uma página web, envia um formulário, ou faz uma pesquisa, o browser envia uma Requisição HTTP para o servidor.</p> +<p>Navegadores Web se comunicam com <a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">servidores Web</a> usando o <strong>H</strong>yper<strong>T</strong>ext<strong>T</strong>ransfer <strong>P</strong>rotocol (<a href="/en-US/docs/Web/HTTP">HTTP</a>). Quando você clica em um link em uma página web, envia um formulário, ou faz uma pesquisa, o browser envia uma Requisição HTTP para o servidor.</p> <p>A requisição inclui:</p> diff --git a/files/pt-br/learn/server-side/first_steps/website_security/index.html b/files/pt-br/learn/server-side/first_steps/website_security/index.html index e32ac4fa3b..2873b597ca 100644 --- a/files/pt-br/learn/server-side/first_steps/website_security/index.html +++ b/files/pt-br/learn/server-side/first_steps/website_security/index.html @@ -162,7 +162,7 @@ original_slug: Learn/Server-side/First_steps/Seguranca_site <p>Este artigo explicou o conceito de segurança na web e algumas das ameaças mais comuns contra as quais o site deve tentar se proteger. Mais importante, você deve entender que uma aplicação web não pode confiar em nenhum dado do navegador. Todos os dados do usuário devem ser limpos antes de serem exibidos ou usados em consultas SQL e chamadas do sistema de arquivos.</p> -<p>Com este artigo, você chegou ao final <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/Server-side/First_steps">deste módulo</a>, abordando seus primeiros passos na programação de sites em relação ao servidor. Esperamos que você tenha gostado de aprender esses conceitos fundamentais e agora esteja pronto para selecionar um <em>Framework web</em> e iniciar a programação.</p> +<p>Com este artigo, você chegou ao final <a href="/pt-BR/docs/Learn/Server-side/First_steps">deste módulo</a>, abordando seus primeiros passos na programação de sites em relação ao servidor. Esperamos que você tenha gostado de aprender esses conceitos fundamentais e agora esteja pronto para selecionar um <em>Framework web</em> e iniciar a programação.</p> <p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p> diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html index ba7a1cba3e..d5a2cc7b07 100644 --- a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -28,7 +28,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks <p class="summary">Depois disso, forneceremos alguns tutoriais que abordam os fundamentos de alguns dos principais frameworks, que fornecem contexto e familiaridade suficientes para começar a se aprofundar mais. Queremos que avance e aprenda sobre estruturas de uma maneira pragmática que não se esqueça das melhores práticas fundamentais da plataforma da web, como acessibilidade.</p> -<p class="summary"><strong><a href="https://wiki.developer.mozilla.org/pr-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Comece agora, com "Introdução às estruturas do lado do cliente"</a></strong></p> +<p class="summary"><strong><a href="/pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Comece agora, com "Introdução às estruturas do lado do cliente"</a></strong></p> <h2 id="Pré_-_requisitos">Pré - requisitos</h2> @@ -52,7 +52,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks </div> <dl> - <dt><a href="c">1. </a><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Começando com o React</a></dt> + <dt><a href="c">1. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Começando com o React</a></dt> <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd> <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Começando com a nossa lista "to do" do React</a></dt> <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd> diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html index 047ed8a804..f81e618a91 100644 --- a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html +++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -29,7 +29,7 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ini <h2 id="Um_Vue_mais_claro"><span class="tlid-translation translation" lang="pt"><span title="">Um Vue mais claro</span></span></h2> -<p>O Vue é uma estrutura JavaScript moderna que fornece recursos úteis para aprimoramento progressivo - ao contrário de muitos outros frameworks, você pode usar o Vue para aprimorar o HTML existente. Isso permite que você use o Vue como um substituto para uma biblioteca como o <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/jQuery">JQuery</a>.</p> +<p>O Vue é uma estrutura JavaScript moderna que fornece recursos úteis para aprimoramento progressivo - ao contrário de muitos outros frameworks, você pode usar o Vue para aprimorar o HTML existente. Isso permite que você use o Vue como um substituto para uma biblioteca como o <a href="/en-US/docs/Glossary/jQuery">JQuery</a>.</p> <p>Dito isto, você também pode usar o Vue para escrever aplicativos de página única (Single Page Applications - SPAs) inteiros. Isso permite criar marcações gerenciadas inteiramente pelo Vue, o que pode melhorar a experiência e o desempenho do desenvolvedor ao lidar com aplicativos complexos. Também permite tirar proveito das bibliotecas para roteamento do lado do cliente (client-side) e gerenciamento de estado quando necessário. Além disso, o Vue adota uma abordagem "intermediária" das ferramentas, como roteamento do lado do cliente e gerenciamento de estado. Embora a equipe mantenedora do Vue sugira bibliotecas para essas funções, elas não são agrupadas diretamente no Vue. Isso permite que você selecione bibliotecas de gerenciamento de estado/roteamento diferentes, se elas se ajustarem melhor ao seu aplicativo.</p> |