Introdução a JavaScript assíncrono
Published: 2023-01-30 19:10:45

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.