Primeiro de tudo, uma promessa é um objeto. Existem 3 estados do objeto Promise como:
- Pendente: Estado inicial, antes que a promessa seja bem-sucedida ou falhe
- Resolvido: Promessa concluída
- Rejeitado: Promessa falhada
Por exemplo, quando solicitamos dados do servidor usando uma Promessa, eles estarão no modo pendente até recebermos nossos dados.
Se conseguirmos obter as informações do servidor, a Promessa será resolvida com êxito, mas se não conseguirmos obter as informações, a Promessa estará no estado rejeitado.
Ademais, se houver várias solicitações, depois que a primeira promessa for resolvida (ou rejeitada), um novo processo será iniciado, que poderá ser anexado diretamente por um método chamado encadeamento.
Se preferir, você também pode assistir a versão em vídeo abaixo:
Qual é a diferença entre retornos de chamada e promessas?
A principal diferença entre funções de retorno de chamada e promessas é que anexamos um retorno de chamada a uma promessa em vez de passá-la. Portanto, ainda usamos funções de retorno de chamada com o Promises, mas de uma maneira diferente (encadeamento).
Essa é uma das maiores vantagens do uso do Promises, mas por quê?
O que é encadeamento?
Somente funções de retorno de chamada estão sendo usadas para operações assíncronas em JavaScript por longos anos, mas em alguns casos o uso do Promises pode ser uma opção melhor.
Se houver várias operações assíncronas a serem feitas e se tentarmos usar os bons e antigos retornos de chamada para eles, nos encontraremos rapidamente em uma situação chamada Inferno de retorno de chamada:
firstRequest(function(response) { secondRequest(response, function(nextResponse) { thirdRequest(nextResponse, function(finalResponse) { console.log('Final response: ' + finalResponse); }, failureCallback); }, failureCallback);}, failureCallback);No entanto, se manipularmos a mesma operação com o Promises, já que podemos anexar retornos de chamada em vez de passá-los, desta vez o mesmo código acima parecerá muito mais limpo e fácil de ler:
firstRequest() .then(function(response) { return secondRequest(response);}).then(function(nextResponse) { return thirdRequest(nextResponse);}).then(function(finalResponse) { console.log('Final response: ' + finalResponse);}).catch(failureCallback);O código acima mostra como vários retornos de chamada podem ser encadeados um após o outro. O encadeamento é uma das melhores características do Promises.
Criando e usando uma promessa passo a passo
Primeiramente, usamos um construtor para criar um objeto Promise:
const myPromise = new Promise();São necessários dois parâmetros, um para êxito (resolução) e outro para falha (rejeição):
const myPromise = new Promise((resolve, reject) => { // condition});Finalmente, haverá uma condição e, se a condição for atendida, a Promessa será resolvida, caso contrário, será rejeitada:
const myPromise = new Promise((resolve, reject) => { let condition; if(condition is met) { resolve('Promise is resolved successfully.'); } else { reject('Promise is rejected'); }});Por isso, criamos nossa primeira promessa. Agora vamos usá-lo.
então () para promessas resolvidas:
Se você revisitar a imagem no início desta postagem, verá dois casos: um para promessas resolvidas e outro para rejeitado. Se a promessa for resolvida (caso de sucesso), algo acontecerá a seguir (depende do que fazemos com a promessa bem-sucedida).
myPromise.then();O método then () é chamado após a promessa ser resolvida. Então podemos decidir o que fazer com a promessa resolvida.
Por exemplo, vamos registrar a mensagem no console que recebemos da Promessa:
myPromise.then((message) => { console.log(message);});catch () para promessas rejeitadas:
No entanto, o método then () é apenas para promessas resolvidas. E se a promessa falhar? Então, precisamos usar o método catch ().
Da mesma forma que anexamos o método then (), também podemos anexar diretamente o método catch () logo depois ():
myPromise.then((message) => { console.log(message);}).catch((message) => { console.log(message);});Portanto, se a promessa for rejeitada, ela passará para o método catch () e, desta vez, veremos uma mensagem diferente no console.
Embrulhar
É assim que criamos uma promessa em JavaScript e a usamos para casos resolvidos e rejeitados. As promessas são um tópico mais amplo, há muito mais a aprender e entender como elas funcionam leva tempo.
Este post é apenas uma introdução ao Promises e espero que você o ache útil para ter uma idéia do que são as Promessas JavaScript e como usá-las.
Se você quiser saber mais sobre Desenvolvimento Web, sinta-se à vontade para visitar minha Canal do Youtube para mais.
Obrigado pela leitura!