Angular Observável vs Angular Promessa: Diferenças, Usos e Como Construí-los

Quando se trata de Angular, existem dois tipos principais de gerenciamento de dados: usando Observáveis ou Promessas, ambos capazes de gerenciar código assíncrono em JavaScript. À primeira vista, os Observáveis são vistos como uma alternativa mais avançada às Promessas. Mas, na verdade, eles são bem diferentes. Desde ter APIs separadas, passando por motivos diferentes, até oferecer maneiras distintas de lidar com o modelo assíncrono em JavaScript, Angular Observables e Angular Promises têm seus próprios poderes.

Como saber qual é o certo para o seu projeto Angular? Vamos discuti-los em detalhes, comparar cada implementação e ver as funções, vantagens e desvantagens. Além disso, demonstrarei como usar Angular Observables e Angular Promises com nosso App Builder low-code  para que você possa lidar com eventos assíncronos com facilidade e rapidez.

Try Ignite UI for Angular

O que é promessa em Angular?

As promessas em Angular fornecem uma maneira fácil de executar funções assíncronas que usam retornos de chamada ao emitir e concluir (resolver ou rejeitar) um valor por vez. Ao usar uma Angular Promise, você pode emitir um único evento da API. Em seguida, o controlador (ou a diretiva) assume o controle, registrando até três retornos de chamada — êxito, erro e/ou notificações.

Existem quatro estados da Angular Promessa:

• cumprido – a ação é cumprida
• rejeitado – falha na ação
• pendente – a ação ainda não foi bem-sucedida ou falhou
• Liquidado – a ação é cumprida ou rejeitada

Algo a lembrar é que Angular Promise é mais passivo em comparação com o Observable e não pode ser cancelado depois de iniciado. Em outras palavras, quando você passa o retorno de chamada para o construtor Promise (controlador ou diretiva), ele resolverá ou rejeitará a função.

Agora, existem várias desvantagens para o Angular Promise.

• As promessas não podem ser canceladas e você precisa aguardar até que o retorno de chamada retorne um erro ou êxito.
• Não é adequado para tratamento de erros centralizado e previsível, pois os erros são enviados para a promessa filho.
• Eles não fornecem nenhuma operação.
• As promessas executam um valor assíncrono apenas uma vez.
• Ele não pode ser usado para vários valores ao longo do tempo.
• Eles se tornam difíceis de gerenciar com aplicativos maiores.
• Eles não podem ser julgados novamente.

Como criar promessas em Angular?

Para criar uma promessa em Angular precisamos apenas usar a sintaxe 'new Promise(function)'. O construtor de promessa recebe a função como um parâmetro e essa função interna recebe resolve e rejeita como parâmetros.

Vamos ver como isso fica no trecho de código abaixo.

Agora que sabemos como criar uma Angular Promise, vamos usá-la para implementar um cenário muito simples. A promessa criada nos ajudará a validar se o número é primo ou não.

E, finalmente, para colocar nosso método em uso, lidaremos com a Promessa da seguinte maneira.

O que é observável em Angular?

Os observáveis fornecem mais recursos, pois permitem que os desenvolvedores executem funções de forma assíncrona e síncrona. Eles representam um fluxo de valores que podem lidar com 0, 1 ou vários eventos, usando a mesma API para cada um. O que eu pessoalmente gosto no Angular Observables é o número de operadores que simplificam a codificação, incluindo retry(), replay(), map, forEach, reduce e muito mais.

Assim como Angular Promises, os Observáveis em Angular também têm suas desvantagens.

• Os observáveis não são suportados nativamente pelos navegadores.
• Eles exigem que os operadores RxJS obtenham um novo fluxo personalizado de valores.
• Depurar o código com observáveis pode ser um pouco mais desafiador.
• Você deve ter o know-how de ferramentas e técnicas extras para testar o código RxJS.

Como criar observáveis no Angular?

Para criar um Observable no Angular, primeiro, é necessário importar Observable do rxjs porque, como aprendemos acima, eles não são suportados nativamente.

Para criar um novo Observable, basta usar seu construtor e adicionar a lógica que será executada na assinatura. No nosso caso, criaremos um Observable que retornará uma ótima fonte de dados para nosso componente de grade Angular.

Depois disso, o que nos resta é assinar o Observable criado e vincular os dados recebidos como fonte de dados aos nossos componentes Angular.

Um exemplo excelente e mais significativo de um caso de uso para trabalhar com observáveis é usar o IgxGrid com dados remotos. Como você pode ver no exemplo, apenas uma pequena parte dos dados é buscada inicialmente quando o componente é renderizado e, em cada operação de rolagem ou dados executada, uma nova parte dos dados é obtida. Esse observável do tipo any[] é vinculado diretamente à grade usando um pipe Angular assíncrono. O pipe assíncrono assina um Observable ou Promise e retorna o valor mais recente que emitiu.

Clique aqui para ver o exemplo e inspecionar o código imediatamente.

Como usar Angular observável e promessa no App Builder?

Como entendemos do que foi escrito acima, o cenário mais comum para usar Observables é quando precisamos vincular dados a algum componente. Para buscar dados, devemos fazer uma solicitação HTTP usando HttpClient. A melhor maneira de fazer isso é realizá-lo em um serviço separado. Todos os métodos HttpClient retornam um RxJS Observable de algo. Em geral, um Observable pode retornar vários valores ao longo do tempo, mas um Observable de HttpClient sempre emite um único valor e, em seguida, é concluído, para nunca mais emitir.

No App Builder, vincular um componente a uma fonte de dados é fácil e intuitivo. Atualmente, você tem as seguintes opções para escolher para usar uma de nossas fontes de dados predefinidas:

• Faça upload de um arquivo JSON ou adicione uma URL a um arquivo JSON que contenha seus dados.
• Adicione/faça upload de um arquivo de definição do Swagger que descreva todos os endpoints do servidor. Você pode obter diretamente seus dados reais de lá.

Depois disso, não importa qual abordagem você escolha, você pode usar o menu suspenso Dados em nosso painel de props para vincular os dados ao componente – por exemplo, à grade Angular.

Agora podemos ver o código gerado em Angular. Oferecemos um serviço separado em que a busca de dados é realizada usando o método HTTP get.

E você pode ver no arquivo ts MasterViewComponent a assinatura que o serviço de dados executou. Com essa base, você pode conduzir cenários ainda mais complicados sempre que necessário.

Angular observável vs promessa: qual é a diferença?

Para apresentar as diferenças entre Observáveis e Promessas em Angular, decidi compor uma tabela. Desta forma, você poderá compará-los de uma forma mais digerível e super concisa.

 

ANGULAR OBSERVABLES	ANGULAR PROMISES
Pode lidar com eventos síncronos e assíncronos	Só pode lidar com retornos de dados assíncronos
Emitir e concluir 0, 1 ou vários valores durante um período de tempo (transmitir dados em vários pipelines)	Emita apenas um valor por vez (tenha um pipeline)
Menos passivo, ou seja,	Mais passivo, significando
Ofereça operações como map, filter, reduce, retry() ou replay(), map, forEach e muito mais	Do not provide operators
São canceláveis, usando o método unsubscribe(), o que significa que o ouvinte não recebe mais valores	Não são canceláveis
São preguiçosos, ou seja, a função de produtor é acionada depois que os usuários se inscrevem no fluxo	Estão ansiosos, ou seja, o callback Promise é executado imediatamente e apenas uma vez no momento de sua definição, sem .then e .catch
Subscribers handle errors	Push errors to the child Promises

Aparentemente, na comparação Angular Observável vs Promessa, o Observável vence. Então, há uma boa razão para usar o Promise? Absolutamente.

Em primeiro lugar, os observáveis têm um certo custo. Como mencionei antes, eles não são suportados nativamente pelos navegadores. O que significa que você deve implementar a biblioteca RxJS. E embora ajude você a criar código assíncrono ou baseado em retorno de chamada, o tamanho do pacote pode exceder 17,4 kb.

Em segundo lugar, quando seu aplicativo Angular é assíncrono por padrão, não há melhor maneira de lidar com todas as funções e eventos assíncronos do que usar Angular Promise. Não é mesmo?

Em seguida, se você não quiser usar o estilo reativo ou não se importar com fluxos de valores e eventos canceláveis, vá para Promessas em Angular.

Em uma nota final, publicamos recentemente um tutorial extremamente detalhado e útil da Grade de Dados da Interface do Usuário do Angular para ajudá-lo a aprender como criar uma Grade de Interface do Usuário do Angular com todos os recursos do zero. Então, você pode querer dar uma olhada também. Clique abaixo.