Como lidar com a assincronicidade em JavaScript (callbacks, Promises, async/await)?

Lidar com a assincronicidade em JavaScript é fundamental, pois muitas operações, como chamadas de API ou acesso a bancos de dados, são assíncronas por natureza. Existem várias maneiras de lidar com a assincronicidade em JavaScript, como callbacks, Promises e async/await. Vou explicar brevemente cada um deles:

1. Callbacks: Callbacks são funções que são passadas como argumentos para outras funções e executadas quando uma operação assíncrona é concluída. Os callbacks podem ser encadeados, mas isso pode levar a uma estrutura de código complexa conhecida como “callback hell”. Exemplo:

function fetchData(callback) {
  // Simulação de chamada assíncrona
  setTimeout(() => {
    const data = 'Dados retornados da chamada assíncrona';
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});

2. Promises: As Promises foram introduzidas para ajudar a resolver o problema do callback hell e fornecer uma maneira mais estruturada de lidar com a assincronicidade. Uma Promise representa uma operação assíncrona que pode estar pendente, ser cumprida com um valor ou ser rejeitada com um erro. Exemplo:

function fetchData() {
  return new Promise((resolve, reject) => {
    // Simulação de chamada assíncrona
    setTimeout(() => {
      const data = 'Dados retornados da chamada assíncrona';
      resolve(data);
      // ou reject(new Error('Ocorreu um erro'));
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log('Ocorreu um erro:', error);
  });

3. async/await: A sintaxe async/await foi introduzida no ES2017 e é uma maneira mais concisa e legível de lidar com código assíncrono. O async é usado para declarar uma função assíncrona, que retorna uma Promise, e o await é usado para pausar a execução até que a Promise seja resolvida. Exemplo:

function fetchData() {
  return new Promise((resolve, reject) => {
    // Simulação de chamada assíncrona
    setTimeout(() => {
      const data = 'Dados retornados da chamada assíncrona';
      resolve(data);
      // ou reject(new Error('Ocorreu um erro'));
    }, 1000);
  });
}

async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log('Ocorreu um erro:', error);
  }
}

fetchDataAsync();

O uso de async/await torna o código mais legível e sem a necessidade de encadear várias chamadas de then().

Essas são algumas das maneiras de lidar com a assincronicidade em JavaScript. Cada abordagem tem suas vantagens e desvantagens, e a escolha depende do contexto e das preferências pessoais.