JavaScript Assíncrono com Generators \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 10 Min 30 Seg Tempo restante da oferta: 14 10 30 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) JavaScript Assíncrono com Generators [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # JavaScript Assíncrono com Generators Generators são uma funcionalidade que veio no ES2015 para nos auxiliar no desenvolvimento de código assíncrono. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/javascript_generators.png) Olá, Web Developers! Você já usou Generators? Possuímos a mesma coisa em linguagens como Ruby, por exemplo. Para quem nunca viu, esse nome pode assustar no começo. Mas os Generators são apenas funções. A diferença é que podemos pausar essa função em uma determinada linha e depois mandá-la continuar de onde parou. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) Essa é uma funcionalidade que veio no ES2015 para nos auxiliar no desenvolvimento de código assíncrono. Vejamos um exemplo simples de Generator: ```js function* myCounter(){ var i = 0; while(true){ yield i++; } } var counter = myCounter(); ``` A primeira diferença que notamos com uma função comum é o “\*” depois de “function”. Isso indica que essa função é um Generator. Dentro da função criamos um looping infinito que incrementa uma variável. Dentro do looping colocamos o comando `yield`. Pense nesse comando como um `return`. O `yield` retornará o valor passado para ele e irá pausar a função. Note que eu disse que a função foi pausada, e não finalizada. Depois, executamos a nossa função, que é um Generator, e guardamos o seu retorno na variável `counter`. Porém, `counter` não irá receber o valor que passamos para o `yield`. Receberemos um objeto que nos informa o valor e se o Generator foi finalizado. Para pegar o valor que passamos no `yield`, basta executar a função `next()`. ```js var counterValue = counter.next(); ``` ## Múltiplos yields Podemos ter vários `yield` em uma função, como: ```js function* myGenerator(){ yield 5; console.log("we’re back!"); yield 10; } ``` Ao executar o Generator, a função irá parar no primeiro `yield`. Ao executar `next()` pela primeira vez, obteremos o valor 5. Ao executar `next()` pela segunda vez, a mensagem “we’re back!” será impressa e receberemos o valor 10. ## Lista de retornos Ao invés de um looping para ficar exibindo itens de um Array, podemos mandar o Generator retornar um valor por vez: ```js function* myGenerator1(){ yield [1,2,3,4,5]; } function* myGenerator2(){ yield* [1,2,3,4,5]; } ``` No `myGenerator1`, ao executar o `next()` receberemos um array. Mas no `myGenerator2`, receberemos primeiro o 1, depois o 2, depois o 3, etc, conforme formos executando o `next()`. Para esse comportamento, basta colocar o `*` junto ao comando `yield`. # Finalizando Os Generators já possuem um bom suporte nos navegadores modernos. Caso haja necessidade de dar suporte a navegadores mais antigos, você pode usar o `Babel` para transformar o seu código em ES5. É uma boa ferramenta para trabalharmos com código assíncrono. Caso você esteja interessado em saber mais sobre código assíncrono, Programação Reativa e Funcional, veja o nosso [curso de RxJS](https://www.treinaweb.com.br/curso/programacao-reativa-com-rxjs): [ ![RxJS - Programação reativa](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/reactivex.svg) Curso RxJS - Programação reativa Conhecer o curso ](https://www.treinaweb.com.br/curso/programacao-reativa-com-rxjs) Não conhecia o Generators? O que achou? Já conhecia ou precisou em algum projeto? Compartilhe com a gente nos comentários! - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #NodeJS ](https://www.treinaweb.com.br/blog/tag/nodejs) - [ #Desenvolvimento ](https://www.treinaweb.com.br/blog/tag/desenvolvimento) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/javascript-generators-e-onde-usa-los-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ JavaScript Generators e onde usá-los ](https://www.treinaweb.com.br/blog/javascript-generators-e-onde-usa-los) Veja como e onde podemos aproveitar os Generators no JavaScript para melhorar o nosso código. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/novos-recursos-do-ecmascript-2022-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 4 anos atrás ## [ Novos recursos do ECMAScript 2022 ](https://www.treinaweb.com.br/blog/novos-recursos-do-ecmascript-2022) Novos recursos do ECMAScript 2022 que é a décima terceira edição da especificação que vai padronizar tudo no mundo do JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/NODE-SQUELIZE-MYSQL-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Usando Sequelize ORM com Node e Express ](https://www.treinaweb.com.br/blog/usando-sequelize-orm-com-node-e-express) Vamos aprender a configurar uma aplicação com banco de dados MySQL usando Sequelize ORM com Node.js e Express. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/usando-o-async-await-do-javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Usando o Async / Await do JavaScript ](https://www.treinaweb.com.br/blog/usando-o-async-await-do-javascript) Conheça a funcionalidade async / await do JavaScript que nos ajuda a trabalhar com códigos assíncronos como se estivéssemos escrevendo de forma síncrona. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Introdução à programação assíncrona em PHP usando o ReactPHP ](https://www.treinaweb.com.br/blog/introducao-a-programacao-assincrona-em-php-usando-o-reactphp) Uma introdução à programação assíncrona com PHP e uso básico dos componentes do ReactPHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Promises no ReactPHP ](https://www.treinaweb.com.br/blog/promises-no-reactphp) Dando continuidade aos artigos sobre programação assíncrona com PHP, neste artigo veremos o componente do ReactPHP para trabalharmos com Promises. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/AJAX-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ O que é uma requisição AJAX? ](https://www.treinaweb.com.br/blog/o-que-e-uma-requisicao-ajax) Hoje, é relativamente comum estarmos em contato com requisições AJAX. Confira neste artigo como essa requisição funciona. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/05103838/SIGNALR-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Aplicações em tempo real com ASP.NET Core SignalR ](https://www.treinaweb.com.br/blog/aplicacoes-em-tempo-real-com-asp-net-core-signalr) Aprenda como criar uma streaming api utilizando a biblioteca de aplicações em templo real, SignalR. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/contexto-execucao-JS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 4 anos atrás ## [ Contexto de execução JavaScript ](https://www.treinaweb.com.br/blog/contexto-de-execucao-javascript) Contexto de execução JavaScript é um conceito abstrato que contém informações sobre o ambiente no qual o código atual está sendo executado Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/14141423/node-vs-deno-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 7 anos atrás ## [ Deno: conheça o suposto substituto do Node.js ](https://www.treinaweb.com.br/blog/deno-conheca-o-suposto-substituto-do-node-js) Conheça o Deno, ambiente de execução de JavaScript desenvolvido pelo criador do Node.js e que pode substituí-lo num futuro próximo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/11/diferenca_entre_os_atributos_async_e_defer-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Diferença entre os atributos async e defer ](https://www.treinaweb.com.br/blog/diferenca-entre-os-atributos-async-e-defer) Nesse artigo vamos ver em detalhes como os atributos async e defer se comportam ao declarar seus arquivos JavaScript no HTML. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151507/TRUQUES-NPM-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ O que é NPM e como usar uma biblioteca instalada por ele ](https://www.treinaweb.com.br/blog/o-que-e-npm-e-como-usar-uma-biblioteca-instalada-por-ele) Saiba o que é o NPM (Node Package Manager), como utilizar um pacote, framework ou biblioteca instalada por ele e sobre o package.json. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 10min 30s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58