Aprenda a criar programas assíncronos com JavaScript

A programação assíncrona é um grampo no desenvolvimento de software. É difícil acreditar que esse conceito de programação só existe desde o século XXI. A linguagem de programação F# foi a primeira entre seus pares a introduzir a programação assíncrona, em 2007.

Outras linguagens como C#, Python, JavaScript e C++ adicionaram gradualmente suporte para programação assíncrona. A grande questão é: que valor a programação assíncrona agrega aos seus aplicativos?

Este artigo responde a essa e outras perguntas, então você descobrirá tudo sobre como usar a programação assíncrona.

O que é programação síncrona?

A programação síncrona refere-se a um programa em sua forma mais básica. Este modelo de programação processa as linhas de código em um programa ou script sequencialmente. Ele sempre começa na primeira linha de código em um programa. Em seguida, ele espera até que cada linha de código tenha concluído sua execução antes de passar para a próxima.

O modelo síncrono também inclui código condicional, como

E se e enquanto afirmações. Embora apenas algum código em uma instrução condicional seja executado, o programa ainda será executado sequencialmente.

Exemplo de programa síncrono

const SyncCode = () => {
 console.log("Esta é a primeira linha do programa")
 console.log("Esta é a segunda linha do programa")
 console.log("Esta é a última linha do programa")
}
SyncCode();

A execução do programa JavaScript acima produzirá a seguinte saída no console:

Esta é a primeira linha do programa
Esta é a segunda linha do programa
Esta é a linha final no programa

A saída acima é exatamente o que você deve esperar. O programa começa do topo e espera até que uma linha de código termine antes de passar para a próxima.

O que é programação assíncrona?

A programação assíncrona é o oposto da programação síncrona. O modelo de programação assíncrona processa várias linhas de códigos simultaneamente. Ele não espera até que a linha de código anterior em um programa tenha concluído sua execução antes de passar para a próxima.

Relacionado: Síncrono vs. Programação assíncrona: como eles são diferentes?

A programação assíncrona pode reduzir o tempo de execução pela metade, criando efetivamente computadores mais rápidos.

Exemplo de programa assíncrono

const AsyncCode = () => {
 console.log("Esta é a primeira linha do programa")
 setTimeout(() => {
 console.log("Esta é a segunda linha do programa")
 }, 3000)
 console.log("Esta é a última linha do programa")
}
AsyncCode();

A execução do código JavaScript acima produzirá a seguinte saída em seu console:

Esta é a primeira linha do programa
Esta é a linha final no programa
Esta é a segunda linha do programa

Se você comparar a saída do console acima com o programa assíncrono que a gera, verá que há uma discrepância óbvia. A chamada para registro que diz “Esta é a segunda linha do programa” ocorre antes daquela que diz “Esta é a última linha do programa”. No entanto, a saída do console não reflete isso.

Dado que o JavaScript é principalmente síncrono, o código no programa acima foi executado sequencialmente. Mas JavaScript suporta programação assíncrona por meio de recursos como o setTimeout() método.

O setTimeout() O método é um método JavaScript assíncrono que recebe dois argumentos: uma função e um atraso. O atraso é um temporizador (em milissegundos), que atrasa a execução da função. Assim, enquanto o programa acima aguarda os três segundos para executar a função no setTimeout() método, ele passa para a próxima linha no código. Isso resulta na execução da terceira chamada de função antes da segunda.

Tecnologias JavaScript assíncronas

Apesar de setTimeout() mencionado acima, várias tecnologias JavaScript usam programação assíncrona. Essas tecnologias usam o modelo de programação assíncrona para desenvolver aplicativos sem bloqueio mais rápidos. Algumas dessas tecnologias incluem:

• jQuery Ajax
• Axios
• NodeJS

Relacionado: O que é Node.js? Veja como usar JavaScript do lado do servidor

Criando programas assíncronos com JavaScript

Existem várias maneiras de lidar com código assíncrono. O método escolhido deve depender do tipo de aplicativo que você deseja desenvolver. Esses métodos incluem funções de retorno de chamada, promessas e async/await.

Funções de retorno de chamada

Existem duas propriedades importantes de uma função de retorno de chamada. Eles servem como parâmetros para outras funções e dependem de eventos externos para cumprir seu dever. O setTimeout() O método usado no exemplo assíncrono acima é uma função de retorno de chamada. O programa passa uma função de log como parâmetro (a função de retorno de chamada) e só a executa após três segundos (o evento).

As funções de retorno de chamada são ótimas para programas pequenos, mas à medida que seus aplicativos crescem, elas podem ficar muito complicadas muito rapidamente. Isso ocorre porque as funções de retorno de chamada geralmente chamam outras funções de retorno de chamada, criando uma cadeia de retornos de chamada aninhados.

Usando promessas

JavaScript adicionou suporte para promessas após funções de retorno de chamada. Eles são uma boa alternativa ao criar aplicativos maiores. Uma promessa representa o que pode acontecer após uma operação assíncrona. Esse resultado potencial assumirá uma das duas formas: resolvido ou rejeitado. Uma função separada trata cada um desses resultados, eliminando a necessidade de aninhamento (o problema da função de retorno de chamada). Em vez disso, as promessas encorajam funções em cadeia que são mais fáceis de usar.

Toda promessa começa com um novo Promessa objeto que tem uma função anônima com o resolver e rejeitar parâmetros. Dentro dessa função, você terá o aplicativo assíncrono, que retorna uma resolução se a operação assíncrona for bem-sucedida ou uma rejeição caso contrário.

O então() função chain lida com o resolver função, e o apanhar() função chain lida com o rejeitar função. Portanto, não há necessidade de instruções if aninhadas, como é o caso das funções de retorno de chamada.

Exemplo de uso de promessas

const PromiseFunction = () =>{
 return new Promise((resolver, rejeitar) => {
 setTimeout(() => {
 resolve("esta operação assíncrona foi bem executada")
 }, 3000)
 })
}
PromiseFunction().then((resultado) => {
 console.log("Sucesso", resultado)
}).catch((erro) => {
 console.log("Erro", erro)
})

O código acima retorna a seguinte saída no console:

Sucesso esta operação assíncrona foi bem executada

Isso ocorre porque a promessa retorna o resolver função, que passa seus resultados para o então() função. Se a promessa retornar o rejeitar função o programa usa o apanhar função em vez disso.

Usando Async/Aguardar

Se você não quiser criar uma cadeia de promessas ao lidar com operações assíncronas, tente async/await. Async/await não é uma ferramenta assíncrona completamente diferente das promessas, apenas uma maneira diferente de lidar com elas. Ele lida com promessas sem usar o método chain. Assim, da mesma forma que as promessas lidam melhor com as operações assíncronas do que as funções de retorno de chamada, async/await tem benefícios sobre as promessas simples.

Existem dois atributos principais de cada função async/await. Eles começam com o assíncrono palavra-chave e o aguardam palavra-chave aguarda o resultado de uma operação assíncrona.

Exemplo de programa assíncrono/aguardar

const PromiseFunction = () =>{
 return new Promise((resolver, rejeitar) => {
 setTimeout(() => {
 resolve("esta operação assíncrona foi bem executada")
 }, 3000)
 })
}
const AsyncAwaitFunc = assíncrono () => {
 const resultado = espera PromiseFunction();
 console.log (resultado);
}
AsyncAwaitFunc();

O código acima retornará a seguinte saída no console:

esta operação assíncrona foi bem executada

Quais são as principais conclusões?

Existem vários pontos importantes que você deve tirar deste artigo:

• A programação assíncrona é valiosa porque reduz o tempo de espera de um programa, criando aplicativos mais rápidos.
• Uma função de retorno de chamada pode ser síncrona ou assíncrona.
• As promessas oferecem uma maneira melhor de lidar com operações assíncronas do que as funções de retorno de chamada.
• As funções async/await lidam com promessas de uma maneira melhor do que usar funções de cadeia.
• Uma função assíncrona/aguarda lida com operações assíncronas de uma maneira que parece síncrona, facilitando a compreensão.
• As funções de seta ajudam você a escrever um código melhor.

As funções de seta do JavaScript podem torná-lo um desenvolvedor melhor

Quer ser melhor em desenvolvimento web? As funções de seta, adicionadas ao JavaScript ES6, oferecem duas maneiras de criar funções para aplicativos da web.

Leia a seguir

Sobre o autor