Como trabalha com JavaScript assíncrono?

Trabalho com assíncrono em JavaScript usando callbacks, promessas e async/await.

Callbacks são funções passadas para outras funções como argumentos e que são executadas após a conclusão de uma operação. Podem levar a "infernos de callbacks" quando há aninhamento.

// Exemplo de callback
function fetchData(callback) {
  setTimeout(() => {
    callback("Dados recebidos");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Vai mostrar "Dados recebidos" após 1 segundo
});

As promessas são objetos que representam a conclusão ou falha de uma operação assíncrona. Facilitam o trabalho com código assíncrono, evitando aninhamentos profundos. Têm três estados: pending (pendente), fulfilled (cumprida), rejected (rejeitada).

// Exemplo de promessa
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Dados recebidos");
    }, 1000);
  });
}

fetchDataPromise()
  .then((data) => {
    console.log(data); // Vai mostrar "Dados recebidos" após 1 segundo
  })
  .catch((error) => {
    console.error("Erro:", error);
  });

Async/await é açúcar sintático sobre promessas que torna o código assíncrono mais legível, parecido com síncrono. Uma função marcada com async sempre retorna 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 ou rejeitada.

// Exemplo de async/await
async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Dados recebidos");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Vai mostrar "Dados recebidos" após 1 segundo
  } catch (error) {
    console.error("Erro:", error);
  }
}

processData();

Frequentemente uso async/await ao trabalhar com requisições API, pois é a forma mais conveniente e legível de lidar com operações assíncronas. Para execução paralela de várias operações assíncronas, uso Promise.all() ou Promise.allSettled().

Utilizo o event loop para entender a ordem de execução do código assíncrono, microtarefas e macro-tarefas.