JavaScript é uma linguagem de thread único, o que significa que só pode fazer uma coisa por vez. No entanto, os aplicativos da web geralmente precisam executar tarefas como buscar dados de um servidor, o que pode levar algum tempo. Se o JavaScript tivesse que esperar a conclusão de cada tarefa antes de prosseguir, seu aplicativo da web ficaria lento e sem resposta. É aqui que entra o JavaScript assíncrono (assíncrono).

O que é JavaScript assíncrono?

O JavaScript assíncrono permite que seu código inicie uma tarefa e depois passe para outras tarefas enquanto aguarda a conclusão dessa tarefa. Assim que a tarefa for concluída, seu código pode voltar e tratar o resultado. Isso ajuda a manter seu aplicativo rápido e responsivo.

Conceitos-chave em JavaScript assíncrono

1. Síncrono vs. Assíncrono:

   • Síncrono: Cada tarefa aguarda a conclusão da anterior antes de iniciar. Por exemplo:

    console.log("Start");
    let result = someFunction(); // This might take a while
    console.log("End");
   

   No código síncrono, a mensagem "End" só será registrada após a conclusão de someFunction(), o que pode tornar as coisas mais lentas.

• Assíncronas: as tarefas podem começar e terminar de forma independente, para que seu código não fique preso esperando. Por exemplo:
  

   console.log("Start");
   setTimeout(() => {
       console.log("End");
   }, 2000);
  

  Aqui, a mensagem "Fim" será registrada após 2 segundos, mas enquanto isso, seu código pode continuar fazendo outras coisas.

1. Retornos de chamada:

   • Um callback é uma função passada como argumento para outra função, que será executada após a conclusão de uma tarefa.
   • Exemplo:

    function fetchData(callback) {
        setTimeout(() => {
            let data = "Some data";
            callback(data);
        }, 2000);
    }
   
    fetchData((data) => {
        console.log(data); // This will log "Some data" after 2 seconds
    });
   

• Os retornos de chamada eram a maneira original de lidar com tarefas assíncronas, mas podem ficar complicados, especialmente se você tiver muitas tarefas para gerenciar (isso é conhecido como "inferno dos retornos de chamada").

1. Promessas:

   • Uma promessa é um objeto que representa a eventual conclusão (ou falha) de uma tarefa assíncrona e seu valor resultante.
   • Exemplo:

    let promise = new Promise((resolve, reject) => {
        let success = true;
        if (success) {
            resolve("Task completed successfully!");
        } else {
            reject("Task failed!");
        }
    });
   
    promise.then((message) => {
        console.log(message);
    }).catch((error) => {
        console.log(error);
    });
   

• resolver: Se a tarefa for concluída com sucesso, a promessa será "resolvida" com um valor.
• rejeitar: Se a tarefa falhar, a promessa é "rejeitada" com uma mensagem de erro.
• .then(): Trata o valor retornado se a promessa for resolvida.
• .catch(): Trata o erro se a promessa for rejeitada.

1. Assíncrono/Aguardar:

   • async e await são recursos JavaScript modernos que tornam o trabalho com promessas mais fácil e legível.
   • async: Uma função declarada com async sempre retornará uma promessa.
   • await: Pausa a execução de uma função assíncrona até que a promessa seja resolvida.
   • Exemplo:

    async function fetchData() {
        try {
            let data = await someAsyncTask();
            console.log(data);
        } catch (error) {
            console.error("Error:", error);
        }
    }
   

• Neste exemplo, a palavra-chave await é usada para aguardar a conclusão de someAsyncTask antes de passar para a próxima linha de código. Se a tarefa falhar, o erro será detectado e tratado no bloco catch.

Resumo

• JavaScript assíncrono ajuda a evitar que seu aplicativo fique lento e sem resposta, permitindo que seu código lide com várias tarefas ao mesmo tempo.
• Callbacks são funções executadas após a conclusão de uma tarefa assíncrona, mas podem se tornar confusas com tarefas complexas.
• Promessas fornecem uma maneira mais limpa de lidar com operações assíncronas, representando tarefas que serão concluídas no futuro.
• Async/Await é uma sintaxe moderna que torna o trabalho com promessas mais simples e legível.

Compreender o JavaScript assíncrono é essencial para criar aplicativos da Web responsivos e eficientes, pois permite que seu código execute tarefas sem ficar preso esperando a conclusão de operações lentas.