Sobes.tech
Middle

Fala-me sobre os princípios da assíncronia em JavaScript.

sobes.tech IA

Resposta da IA

Os princípios de assíncronia em JavaScript baseiam-se num modelo de execução de um único thread, onde tarefas que podem levar um tempo considerável (por exemplo, pedidos de rede, temporizadores) não bloqueiam o thread principal, permitindo realizar outras ações. Isto é conseguido através de:

  • Event Loop (Ciclo de eventos): Mecanismo que verifica constantemente a fila de mensagens e executa as tarefas nela. Quando uma operação assíncrona termina, o seu callback é colocado na fila de tarefas.
  • Funções de callback: Funções passadas como argumentos a outras funções e executadas após a conclusão da operação assíncrona.
  • Promises (Promessas): Objetos que representam um valor final de uma operação assíncrona, que pode ser resolvido (fulfilled) ou rejeitado (rejected). Facilitam o trabalho com código assíncrono, evitando o "callback hell".
  • Async/Await: Açúcar sintático sobre as promessas, que permite escrever código assíncrono de forma mais legível e síncrona. As funções marcadas com async retornam sempre uma promessa. O operador await só pode ser usado dentro de funções async e pausa a execução até que a promessa seja resolvida.

Comparação de abordagens:

Abordagem Legibilidade Tratamento de erros Execução paralela
Callbacks Baixa Complexo Pode ser não trivial
Promessas Média Conveniente .all(), .race()
Async/Await Alta Conveniente (try/catch) Torna-se um pouco mais complexo

Exemplo de uso de promessas:

fetch('/api/data') // Operação assíncrona
  .then(response => response.json()) // Tratamento bem-sucedido
  .then(data => console.log(data)) // Processamento de dados
  .catch(error => console.error('Erro:', error)); // Tratamento de erro

Exemplo de uso de Async/Await:

async function fetchData() {
  try {
    const response = await fetch('/api/data'); // Espera pela promessa
    const data = await response.json(); // Espera pela promessa
    console.log(data);
  } catch (error) {
    console.error('Erro:', error); // Tratamento de erro
  }
}
fetchData();