Entendendo o comportamento do Javascript

No JS temos um comportamento não tão comum em outras linguagens: o de executar 'uma coisa por vez'. Daí entram os comportamentos assíncronos, em que esperamos algo ser executado para, após isso, executarmos outra parte do programa

Entendo a diferenca entre Sincrono e Assincrono

Antes de tocarmos no principal deste arquivo, precisamos revisitar o que é um processo síncrono.
Um processo síncrono pode ser exemplificado como uma ligação telefônica, em que falamos e, no mesmo instante, o outro na linha nos responde. É certo que você terá sua resposta assim que falar.
Exemplo de código síncrono, onde recebemos a resposta de imediato:

    function soma(num1, num2){    
        return num1 + num2;  
    } 
    console.log(soma(5 + 5))
    

Porém, um processo assíncrono pode ser exemplificado como algo que você não sabe quando vai ser finalizado. Antigamente, quando enviávamos cartas, não ficávamos esperando até a carta chegar, pois poderia demorar anos ou meses. Continuávamos vivendo nossa vida normalmente. Isso é um belo exemplo de um processo assíncrono.

Promise

A Promise, por outro lado, trabalha como um método de tratamento de requisições e respostas assíncronas.
A Promise nada mais é do que um objeto que facilita o tratamento de requisições assíncronas, permitindo continuar a execução, finalizar ou ignorar. Para isso, temos três métodos principais:

.then()
.catch()
.finally()

• .then()
  com o metodo then podemos executar uma funcao quando a promise é resolvida, por exemplo:

        function getUser(userId){
           const userData = fetch(`https://minhapi.com/users/${userId}`)
          .then(response => {
          
          if(!response.ok){
              trhow new Error("Erro na requisicao") 
          }
           return response.json
          })
          .then((data => console.log(data.name))
        }
        getUser(1);
        
        
  

  No codigo acima temos a simples representacao do metodo .then(), onde verificamos as promisse como correta, e concatenamos mais um .then que em caso de sucesso do primeiro, é executado em seguida.

• .catch()
  o querido "catch", quando o vemos em um codigo já sabemos para que vamos ultiliza-lo, o metodo de tratamento de erros, tambem podemos concatena-lo com .then() para um tratamento "refinado" de erros:

  function getUser(userId){
          const userData = fetch(`https://minhapi.com/users/${userId}`)
         .then(response => {
         
         if(!response.ok){
             trhow new Error("Erro na requisicao") 
         }
          return response.json
         })
         .then((data => console.log(data.name))
         
         .catch(error => console.error(error))
       }
       getUser(1);
  

• .finally()
  Por acaso, por fim o .finally, o metodo que executa independente dos erros, é a "ultima esperanca" da execucao do Promise

  function getUser(userId){
  const userData = fetch(https://minhapi.com/users/${userId})
  .then(response => {

        if(!response.ok){
            trhow new Error("Erro na requisicao") 
        }
         return response.json
        })
        .then((data => console.log(data.name))
        
        .catch(error => console.error(error))
        .finally(() => console.log("Sempre executa")) 
      }
      getUser(1);
  

O .finally() sempre será executado em nosso código, em última instância, não havendo, por padrão, uma convenção de variável a ser executada.

Async/Await

Os métodos Async/Await são relativamente novos, implementados na versão ES2017, porém construídos em cima das Promises. Isso mesmo: esse método é apenas uma abstração para a Promise, o que faz o código parecer mais síncrono, utilizando menos linhas e menos declarações complexas para alcançar o objetivo final.

Async

Quando declaramos uma funcao como async, automaticamente ela sempre retorna um promise, com os metodos then() e catch()

async function soma(x, y){
    return x + y;
};

que no promise a moda antiga seria declarado como:

soma(2,3).then(resultado=> console.log(resultado)
});

Await

Quando traduzimos de forma literal o await encotraremos algo como "Esperar".
Seria comos e pedissemos um lanche no delivery e aguardassemos o pedido na porta, sem esperar o app notificar.
Podemos representar o await da seguinte forma:

    async function getUser(userId) {
     let response = await fetch(`https://api.com/api/user/${userId}`); 
     let userData = await response.json();
     return userData.name;
 }

No trecho acima, aguardamos a resposta vinda da API. Quando essa resposta chega, aguardamos a atribuição do response.json e, por fim, retornamos.

Por fim...

É importante destacar que os métodos Promise e Async se diferenciam apenas em sua escrita e no tratamento de erros. No Promise, fazemos muito manualmente, enquanto no Async tudo fica muito mais visivelmente síncrono, trazendo maior fluidez ao código.
Também há diferença no tratamento de erros: enquanto no Promise podemos usar .catch() e .finally(), no Async precisamos usar try/catch ou try/finally.

Espero que voces tenham gostado dessa breve introducao