Como funciona async/await do ES7?

Neste post explico como utilizar a sintaxe do ES2017 para trabalhar com um "sugar syntax" de Promises conhecidas como funções async/await e exemplifico comparando com Promises para processar dados sequencias e em paralelo.

<hr /> <p dir="auto">A sintaxe de funções <code>async são convertidas para <code>Promises nativos do JavaScript, tornando-a compatível com as implementações existentes. <p dir="auto">Para exemplificar vou deixar aqui duas Promises que vou utilizar: <pre><code>// Retorna um usuário depois de 1 segundo. function usuario(id) { const users = { 1: {id: 1, nome: 'Marcos'}, 2: {id: 2, nome: 'Pedro'} }; return new Promise(resolve => { setTimeout(() => resolve(users[id]), 1e3); }); } // Retorna o cargo depois de 2 segundos function cargo(idUsuario) { const cargos = { 1: { titulo: 'Sobrinho do chefe' }, 2: { titulo: 'XGH Evangelista' } }; return new Promise((resolve, reject) => { setTimeout(() => { let usuario = cargos[idUsuario]; if (usuario) resolve(usuario); else reject('Usuário não existe!'); }, 2e3); }); } <p dir="auto">Agora vamos criar algumas funções usando sintaxe async/await. <p dir="auto"><strong>Sequencial: <pre><code>async function cargoDoMarcos() { const user = await usuario(1); const cargo = await cargo(user.id); return cargo.title; } <p dir="auto">O código acima vai retornar uma Promise, que quando resolvida retorna o título do cargo do Marcos. Se fosse escrita como Promise seria: <pre><code>function cargoDoMarcos() { return usuario(1) .then(user => cargo(user.id); } <p dir="auto">Apesar do código em forma de promessa ser mais curto no caso, o código da função async é muito mais simples de se entender quando lendo o código. Isso fica bem claro quando o código tem várias promessas em sequencia. <p dir="auto">Mas e quanto a chamadas em paralelo? <p dir="auto"><strong>Paralelo: <pre><code>async function meusColegas() { // Chamei os dois sem o await let marcos = usuario(1); let pedro = usuario(2); // Agora eu vou usar esses objetos então vou esperar pela resposta deles: marcos = await marcos; // após 1 segundos vai continuar pedro = await pedro; // já tem o pedro, imediatamente vai continuar return `${marcos.nome} e ${pedro.nome}`; } <p dir="auto">Se a gente usasse o await na chamada do usuário, a promessa iria aguardar o usuário do <code>marcos por 1 segundo e então chamar pelo <code>pedro o qual faria a aplicação aguardar por outro segundo. <p dir="auto">Se fosse utilizando promesas ficaria assim: <pre><code>function meusColegas() { let marcos = usuario(1); let pedro = usuario(2); return Promises.all([marcos, pedro]) .then(colegas => `${colegas[0].nome} e ${colegas[1].nome}`); } <p dir="auto">Escrever no formato de Promise mais uma vez pode ser mais curto, mas é menos legível, claro que podemos escrever de forma mais verbosa usando Promise que pode se tornar mais legível, mas quando estamos falando de códigos reais, normalmente utilizar async vai tornar seu código muito mais legível e potencialmente mais simples. <p dir="auto"><strong>Rejeições com async: <p dir="auto">É possível rejeitar um resultado de função async utilizando <code>throw valor, o resultado será o mesmo que usar <code>Promise.reject(valor). <pre><code>async function nomeDoUsuarioInvalido() { const usuario = await usuario(3); // A partir desta linha, nada será executado, pois o usuario(3) foi rejeitado. return usuario.nome; } <p dir="auto">A função <code>usuarioInvalido quando chamada vai ser rejeitada, executando o <code>usuarioInvalido().catch(erro => console.log(erro)) você pode ver o erro. <p dir="auto">Mas para ignorar erros, você pode usar blocos de <code>try-catch nas funções async, exemplo: <pre><code>async function nomeDoUsuarioInvalido() { let usuario; let nome; try { usuario = await usuario(3); // A proxima linha será ignorada nome = usuario.nome; } catch (erro) { // erro = 'Usuário não existe!' nome = 'Ninguém'; } // Este código será executado e vai retornar 'Ninguém' return nome; }