Dúvida sobre funções assíncronas em Javascript

Quando vc usa o await vc transforma sua função assíncrona em uma função síncrona.

Ou seja, o await faz o programa esperar a resolução da Promise antes de continuar.

Ajustei os códigos que vc mostrou e preparei 2 exemplos para demonstrar a diferença.

EXEMPLO 1

function minhaFuncao() {
  return new Promise((resolve) => setTimeout(() => resolve("Hello"), 2000));
}

console.log(new Date(), "Início");

minhaFuncao()
  .then((result) => console.log(new Date(), result))
  .catch((error) => console.error(new Date(), error));

console.log(new Date(), "Fim");

O resultado será parecido com este:

2024-04-07T14:22:29.815Z Início
2024-04-07T14:22:29.823Z Fim
2024-04-07T14:22:31.826Z Hello

Note que "Início" e "Fim" são impresso um logo após o outro enquanto que "Hello" só aparece 2 segundos depois.

É isso que a Promisse faz, executa uma tarefa fora do fluxo normal do programa.

EXEMPLO 2

function minhaFuncao() {
  return new Promise((resolve) => setTimeout(() => resolve("Hello"), 2000));
}

console.log(new Date(), "Início");

const resultado = await minhaFuncao();
console.log(new Date(), resultado);

console.log(new Date(), "Fim");

O resultado será parecido com este:

2024-04-07T14:28:53.733Z Início
2024-04-07T14:28:55.743Z Hello
2024-04-07T14:28:55.743Z Fim

Aqui "Início" é impresso e 2 segundos depois vem "Hello" e por último "Fim".

Percebeu o que eu disse antes sobre o await esperar a resolução da Promise antes de continuar o programa?

---

E sobre o try/catch não tem segredo. É com essa duplinha que tratamos exceções no JavaScript.

Se vc estiver usando Promise, vc vai usar then/catch, mas quando vc usa o await, a Promise passa a se comportar como uma função síncrona e vc precisa usar try/catch para tratar possíveis erros.

Sobre quando vc deve usar cada uma, acredito que o ideal é modelar o seu programa todo de forma assíncrona pra tirar total proveito das Promise, mas pode haver situações em que isso não é possível, ou então vc sabe que a tarefa que a Promise vai realizar é tão simples e rápida que vale a pena esperar.

Olha vc esta aprendendo os conceitos de maneira inversa.
O correto seria:

• Calbacks
• Promises
• Async await

Esta ordem tem motivos.
Pois uma vem depois da outra!

Se quiser entender melhor tem estes artigos que falam de cada uma delas na ordem!

https://dev.to/urielsouza29/javascript-primeiro-aprender-funcoes-callback-sem-entender-o-conceito-3ggl

Opa tudo bem Bruno? Seguinte, eu tecnicamente aprendi async/await na marra sem ordem nem nada, não estou dizendo que é o certo. Portanto, a diferença entre promise e try/catch, funcionalmente são a mesma coisa, mas a promise se torna um pouco diferente.

Try/catch

Esse método, ele é utilizado em casos sincronos onde não há a utilização de async/await, mas nada diz que você precisa utilizar esse método só nessa situação. No exemplo abaixo explico como funciona o resultado da função.

async function hello_world() {
  try {
    const request = await _api-response_
    return request;
  } catch (error) {
      return error;
    }
}

Nessa função, o resultado produzido será um return com os dados esperados - se der certo - ou um resultado com os erros. Se o resultado for o esperado e você, por exemplo receber um json, você conseguirá acessar o json sem precisar realizar outro passo, nesse caso, um .then que é necessário quando se tem uma promise sem async/await.

Promise

Essencialmente a ideia é a mesma que o try/catch, mas esse método é utilizado e recomendado para funções assíncronas como em apis próprias. Normalmente se pode utilizar sem a necessidade async/await, mas você precisará encadear estruturas .then/.catch para saber os resultados.

function minhaFunçao() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Hello");
        }, 2000);
    });

minhaFuncao()
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.error(error);
    });

Neste exemplo, se você colocar a função (minhaFuncao) em um console, você perceberá que será mostrado: "Promise {<pending}". Nesse caso você não consegue saber o retorno da função, para saber você precisa realizar a estrutura de .then que mostra o resultado da promise. Entretanto, você pode evitar esse passos a mais utilizando o async/await para dizer ao request que você pode esperar as promises se resolverem e trazer o resultado esperado, sem a necessidade de fazer o .then/.catch.

Quando utilizar um ou outro?

Resumidamente, utiliza-se o método try/catch em situações síncronas que podem gerar erros que você queira tratar. Já a promise é utilizada, comumente, para funções assíncronas. Ou seja, essencialmente são a mesma coisa, são estruturas para tratar resultados diferentes, mas são utilizadas em contextos diferentes, como em contextos síncronos (try/catch) e assíncronos (promises). No fim, você pode utilizar try/catch em situações assícronas e promises em situações sincronas ou vice e versa, mas a utilizacão de promises em contextos assíncronos, torna a leitura do código mais limpa e clara demonstrando organização de código a outros programadores.