Como realmente aprender a usar promessas em JavaScript?

Para aprender a usar promessas em JavaScript, você pode começar entendendo o conceito por trás delas. Promessas são objetos que representam a conclusão (ou falha) de uma operação assíncrona e retornam um valor no futuro.

Existem três estados possíveis para uma promessa:

1. Pendente: quando a promessa está esperando para ser cumprida ou rejeitada.
2. Cumprida: quando a operação assíncrona foi concluída com sucesso e o valor desejado foi retornado.
3. Rejeitada: quando a operação assíncrona falhou e um motivo de rejeição foi retornado.

A sintaxe básica para criar uma promessa é a seguinte:

const minhaPromessa = new Promise((resolve, reject) => {
  // Aqui dentro, você executa sua operação assíncrona, por exemplo:
  setTimeout(() => {
    const valor = "Exemplo de valor cumprido";
    resolve(valor); // Se a operação for concluída com sucesso, você chama "resolve" e passa o valor desejado
    // Ou, caso haja uma falha, você chama "reject" e passa uma mensagem de erro:
    // reject("Exemplo de motivo de rejeição");
  }, 2000);
});

Você pode então acessar o valor cumprido ou tratá-lo em caso de rejeição usando os métodos then() e catch():

minhaPromessa
  .then((valor) => {
    console.log(valor);
  })
  .catch((motivo) => {
    console.error(motivo);
  });

No exemplo acima, o valor será exibido no console após 2 segundos, ou uma mensagem de erro será exibida caso a promessa seja rejeitada.

Uma vantagem das promessas é a capacidade de encadear várias operações assíncronas, através do uso dos métodos then(). Isso permite que você evite o aninhamento excessivo de callbacks.

Por exemplo, considere que você queira fazer uma chamada AJAX e, em seguida, manipular os dados retornados. Você pode usar promessas dessa maneira:

fazerChamadaAJAX()
  .then((dados) => manipularDados(dados))
  .then((dadosManipulados) => exibirDados(dadosManipulados))
  .catch((erro) => console.error(erro));

Nesse exemplo, fazerChamadaAJAX() retorna uma promessa que é cumprida com os dados retornados pela chamada AJAX. Esses dados são, então, passados para a função manipularDados(), que retorna uma nova promessa com os dados manipulados. Essa nova promessa é encadeada com o método then() e, em seguida, o resultado é passado para a função exibirDados(). Se houver algum erro ao longo do caminho, o método catch() será chamado para tratá-lo.

Praticar escrevendo código com promessas e entender como elas funcionam em diferentes cenários é a melhor maneira de aprender a usá-las efetivamente.