Promises com Async/Await no JavaScript | Um Guia para Iniciantes

Nos últimos anos, o JavaScript passou por uma grande evolução com a introdução de conceitos assíncronos para lidar com operações que consomem tempo, como solicitações de rede e acesso a bancos de dados. As Promises tornaram-se a base para lidar com essas operações de forma mais eficiente e legível. No entanto, com o surgimento do async/await no ECMAScript 2017 (ES8), o código assíncrono em JavaScript se tornou ainda mais elegante e fácil de entender.

Promises

Antes de falarmos de async/await, é fundamental compreender as Promises. Uma Promise representa um valor que pode estar disponível agora, no futuro ou nunca. Ela permite que você lide com operações assíncronas de uma maneira mais concisa e organizada. Uma Promise pode estar em um dos três estados: pendente, resolvida ou rejeitada.

Em uma Promise teremos 2 callbacks uma para quando a Promise for resolvida (resolve) e outra para quando for rejeitada (reject).

Async/Await

O async/await é uma maneira mais moderna e elegante de trabalhar com código assíncrono em JavaScript. Ele permite escrever código assíncrono como se estivesse sincronizado, o que melhora significativamente a legibilidade e a manutenção do código.

A palavra-chave async é usada para declarar uma função assíncrona, enquanto await é usado para esperar a resolução de uma Promise dentro de uma função assíncrona.

Vantagens do Async/Await

Código mais limpo e legível: O código assíncrono é escrito de forma sequencial, tornando-o mais fácil de entender e manter.
Tratamento de erros simplificado: O try/catch permite lidar facilmente com erros, tornando o código mais robusto.
Compatibilidade com Promises existentes: Você pode usar await com qualquer objeto Promise, facilitando a migração de código legado.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise Async Await</title>
</head>
<body>
    <script>
        // let promise = new Promise(function (resolvido, rejeitado){

        //     let a = 1 + 11;
        //     if(a == 2){
        //         resolvido("Sucesso funcionou tudo ok!")
        //     }else{
        //         rejeitado("Falhou!!!")
        //     }

        // })

        // promise.then(function resolvido(mesagem){  // quando o resolve é chamado
        //     console.log("Aqui é a parte do then " + mesagem)
        // }).catch(function rejeitado(erro){
        //     console.log("Aqui é o catch " + erro)
        // })
        async function executarPromise(){
            let promise = new Promise(function (resolvido, rejeitado){

            let a = 1 + 1;
            if(a == 2){
                resolvido("Sucesso funcionou tudo ok!")
            }else{
                rejeitado("Falhou!!!")
            }

            })
            
           try{
            let mensagem = await promise;
            console.log("Aqui é a parte do then " + mensagem);
           }catch (erro){
           console.log("Aqui é o catch " + erro)
        }
    }

    executarPromise();
        
        
    </script>
</body>
</html>

Conclusão

Dominar Promises com async/await é uma habilidade essencial para qualquer desenvolvedor JavaScript. Essas ferramentas permitem lidar com operações assíncronas de forma eficiente, mantendo o código claro e conciso.

À medida que você se familiariza com async/await, experimente aplicá-lo em seus próprios projetos para aproveitar seus benefícios e melhorar a qualidade do seu código JavaScript.