Introdução a JavaScript assíncrono

Sabemos das possibilidades que o JavaScript nos propõe. Hoje falaremos sobre como funciona o processo assíncrono nesta linguagem. Mas qual a diferença entre um código síncrono e assíncrono? O que é Callback e Promises?

Síncrono e Assíncrono -

Veja como funciona abaixo um código síncrono:

console.log('Calculando:');
//console.log('2 + 2')
let sum = 2 + 2;
console.log('Resultado é igual a:', sum);
console.log('Fim do cálculo');

Na sua opinião, o que vai acontecer com esse código? Ele será lido de maneira ordenada até chegar ao último console, pode afirmar. Está correto, mas se por alguma eventualidade um comando adicional bloquear a thread principal?

console.log('Calculando:');
let sum = 2 + 2;
alert('Clique para continuar');
console.log('Resultado é igual a:', sum);
console.log('Fim do cálculo');

O seu navegador irá parar a execução até que a operação seja concluída. Apenas quando clicar no OK do alerta alert('Clique para continuar');, que o código poderá continuar.

Qual o lado negativo disso? Além da impossibilidade de um multitarefas, não sabemos quanto tempo um vídeo será carregado, uma imagem será baixada ou uma resposta de um serviço será retornada, e pior, se ocorrerá um erro ou não. O uso de um código síncrono nos deixa vulneráveis a essas questões.

Assync:

No caso de JavaScript Assíncrono, tal tem a capacidade de executar códigos em segundo plano sem interromper o processamento principal da página.

Funções assíncronas e que usam call-backs não retornam nada imediatamente:

let foto = downloadFoto('http://coolcats.com/cat.gif')

// foto é 'undefined'!

O que são Callback e Promises -

O Javascript, e outras linguagens de programação, os códigos são executados de forma sequencial, o que pode causar os problemas de código síncrono antes citados. Por isso, podemos utilizar o Callback, Callback é uma função passada como argumento para outra função, que será executada posteriormente

Para facilitar a compreensão,vejamos agora o caso:

function imprimeNoConsoleOResultado(valor) {
  console.log(`==> Resultado: ${valor} <===`);
}

A função abaixo imprime no console o valor que ela recebe por parâmetro.

function calcula(valor1, valor2, exibirResultado) {
  const resultado = valor1 + valor2;
  exibirResultado(resultado);
}

Agora,veja a utilização do callback no imprimeNoConsoleOResultado

calcula(2, 2, imprimeNoConsoleOResultado);

O resultado será 4

Com esse exemplo vimos que a função calcula realiza o calculo e o resultado ela repassa para o Callback, que por sua vez manipula de acordo com a sua implementação.

Já Promises são objetos que representam a conclusão ou erro do assíncrono. Elas fornecem uma maneira clara de lidar com erros e resultados de operações assíncronas. Precimos saber que tal está ligado diretamente a Callback.

// Criando uma promise
const p = new Promise((resolve, reject) => {
  try {
    resolve(funcaoX())
  } catch (e) {
    reject(e)
  }
})

// Executando uma promise
p
  .then((parametros) => /* sucesso */)
  .catch((erro) => /* erro */)

// Tratando erros e sucessos no then
p
  .then(resposta => { /* tratar resposta */ }, erro => { /* tratar erro */ })

Em resumo, a programação assíncrona é uma parte crucial da programação web moderna. Com as ferramentas disponíveis, como callbacks, Promises e async/await, é possível criar aplicativos web complexos e escaláveis sem comprometer a performance ou a usabilidade.