Resolução, rejeição e encadeamento explicados

Resolução, rejeição e encadeamento explicados

8 de June, 2020 0 By António César de Andrade
Click to rate this post!
[Total: 0 Average: 0]


As promessas são uma das maneiras de lidar com operações assíncronas em JavaScript. Muitas pessoas lutam para entender como as Promessas funcionam. Neste post, tentarei explicá-las da maneira mais simples possível.

As promessas são um tópico mais amplo, por isso não posso detalhar todos os detalhes, mas você encontrará aqui informações gerais sobre o que são as promessas, termos como resolver, rejeitar, encadear e um exemplo de código para criar e usar as promessas.

Pré-requisito: Para entender melhor este artigo, consulte também meu outro post sobre Retornos de chamada em JavaScript.

O que é uma promessa?

Uma promessa em JavaScript é semelhante a uma promessa na vida real. Quando fazemos uma promessa na vida real, é uma garantia de que faremos algo no futuro. Porque promessas só podem ser feitas para o futuro.

Uma promessa tem 2 resultados possíveis. Ele será mantido quando chegar a hora ou não.

Também é o mesmo para promessas em JavaScript. Quando definimos uma promessa em JavaScript, ela será resolvida quando chegar a hora ou será rejeitada.

Promessas em JavaScript

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

Representação do processo de promessas

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.

Além disso, 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!



Fonte