{"id":49257,"date":"2024-05-23T12:00:00","date_gmt":"2024-05-23T15:00:00","guid":{"rendered":"https:\/\/www.locaweb.com.br\/blog\/?p=49257"},"modified":"2024-07-30T17:25:25","modified_gmt":"2024-07-30T20:25:25","slug":"javascript","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/javascript\/","title":{"rendered":"Async\/Await no JavaScript: como usar requisi\u00e7\u00f5es ass\u00edncronas e promessas?\u00a0"},"content":{"rendered":"\n

O Async\/Await permite lidar com requisi\u00e7\u00f5es ass\u00edncronas e promessas no JavaScript. Aprenda t\u00e9cnicas avan\u00e7adas para otimizar o c\u00f3digo.<\/em>\u00a0<\/p>\n\n\n\n

A habilidade de lidar com requisi\u00e7\u00f5es ass\u00edncronas<\/strong> em JavaScript<\/a> \u00e9 fundamental para a constru\u00e7\u00e3o de aplica\u00e7\u00f5es robustas e eficientes.  <\/p>\n\n\n\n

Neste guia, mergulharemos no universo de promises (promessas)<\/strong> e Async\/Await, mostrando como aplicar esses conceitos para otimizar o c\u00f3digo e aprimorar a experi\u00eancia do usu\u00e1rio. <\/p>\n\n\n\n

Exploraremos desde os fundamentos das promessas at\u00e9 t\u00e9cnicas avan\u00e7adas de composi\u00e7\u00e3o e gest\u00e3o de erros<\/strong>, proporcionando um conhecimento pr\u00e1tico para aumentar o seu dom\u00ednio sobre o desenvolvimento ass\u00edncrono em JavaScript. <\/p>\n\n\n\n

Continue a leitura para saber como aproveitar ao m\u00e1ximo as promises e Async\/Await para criar aplica\u00e7\u00f5es <\/strong>n\u00e3o bloqueantes! <\/p>\n\n\n\n

O que s\u00e3o promessas no JavaScript?<\/strong> <\/h2>\n\n\n\n

As promessas no JavaScript<\/strong> s\u00e3o objetos que representam o resultado de uma opera\u00e7\u00e3o ass\u00edncrona que ainda n\u00e3o foi conclu\u00edda, mas que eventualmente resultar\u00e1 em um valor ou em um erro. <\/p>\n\n\n\n

Elas s\u00e3o classificadas em tr\u00eas estados: <\/p>\n\n\n\n

    \n
  1. Pendente<\/strong>: estado inicial da promessa, em que a opera\u00e7\u00e3o est\u00e1 em andamento e seu resultado ainda n\u00e3o est\u00e1 dispon\u00edvel.\u00a0<\/li>\n<\/ol>\n\n\n\n
      \n
    1. Resolvida <\/strong>(fulfilled): a opera\u00e7\u00e3o foi conclu\u00edda com sucesso e o valor esperado foi retornado.\u00a0<\/li>\n<\/ol>\n\n\n\n
        \n
      1. Rejeitada <\/strong>(rejected): a opera\u00e7\u00e3o ass\u00edncrona falhou e um erro foi retornado.\u00a0<\/li>\n<\/ol>\n\n\n\n

        As promessas registram fun\u00e7\u00f5es de retorno de chamada<\/strong> para serem executadas quando a promise for resolvida ou rejeitada, utilizando os m\u00e9todos `.then()` e `.catch()`, respectivamente.  <\/p>\n\n\n\n

        Este m\u00e9todo \u00e9 especialmente \u00fatil em situa\u00e7\u00f5es pr\u00e1ticas, como requisi\u00e7\u00f5es de rede, leitura de arquivos e processamento de grandes volumes de dados, em que a efici\u00eancia e a n\u00e3o obstru\u00e7\u00e3o da execu\u00e7\u00e3o s\u00e3o cruciais. <\/p>\n\n\n\n

        As promises permitem escrever c\u00f3digo que espera um resultado sem bloquear a execu\u00e7\u00e3o de outras opera\u00e7\u00f5es<\/strong>, o que \u00e9 importante para manter a fluidez de aplica\u00e7\u00f5es web.\u00a0<\/p>\n\n\n\n

        Como criar e usar promessas para requisi\u00e7\u00f5es ass\u00edncronas?<\/strong> <\/h3>\n\n\n\n

        As promessas s\u00e3o \u00fateis para lidar com opera\u00e7\u00f5es ass\u00edncronas de forma mais clara e organizada em JavaScript.  <\/p>\n\n\n\n

        Vamos demonstrar como criar e utilizar promises para realizar, por exemplo, uma chamada a uma API<\/a>. <\/p>\n\n\n\n

        function fetchData() {<\/em> <\/p>\n\n\n\n

            return new Promise((resolve, reject) => {<\/em> <\/p>\n\n\n\n

                setTimeout(() => {<\/em> <\/p>\n\n\n\n

                    const data = { id: 1, name: ‘John’ };<\/em> <\/p>\n\n\n\n

                    resolve(data);<\/em> <\/p>\n\n\n\n

                }, 2000);<\/em> <\/p>\n\n\n\n

            });<\/em> <\/p>\n\n\n\n

        }<\/em> <\/p>\n\n\n\n

        fetchData()<\/em> <\/p>\n\n\n\n

            .then(data => {<\/em> <\/p>\n\n\n\n

                console.log(‘Dados obtidos:’, data);<\/em> <\/p>\n\n\n\n

            })<\/em> <\/p>\n\n\n\n

            .catch(error => {<\/em> <\/p>\n\n\n\n

                console.error(‘Erro ao obter dados:’, error);<\/em> <\/p>\n\n\n\n

            });<\/em> <\/p>\n\n\n\n

        No exemplo, a fun\u00e7\u00e3o `fetchData()` retorna uma promessa que simula uma requisi\u00e7\u00e3o ass\u00edncrona<\/strong> por meio de um atraso de dois segundos. <\/p>\n\n\n\n

        Em seguida, utilizamos os m\u00e9todos `.then()` e `.catch()` para lidar com o resultado da promise, imprimindo os dados obtidos no console<\/strong>, em caso de sucesso, ou exibindo um erro, se houver falha. <\/p>\n\n\n\n

        E o que s\u00e3o fun\u00e7\u00f5es Async\/Await?<\/strong> <\/h2>\n\n\n\n