É muito comum que trabalhemos em interfaces de usuário, sejam elas web ou mobile, com dados e funções assíncronos. Um dado assíncrono é todo aquele cuja resposta da chamada de função é executada em background e somente retorna um valor ou completa depois de um tempo, mas a principal vantagem é que ela não para a execução da thread principal a fim de obter uma resposta.
Pense em uma chamada de API por exemplo, temos a latência de rede que é alta, se formos esperar por uma resposta bloqueante iríamos congelar a interface com o usuário.
Os dados assíncronos são utilizados em Angular principalmente em chamadas Http, mas podem ser utilizados em chamadas de banco locais, em cenários onde se quer escutar e emitir um evento da aplicação, entre outros. O angular utiliza o RxJs que é uma biblioteca com a implementação do design do Reactivex. O reactivex tem implementações em diversas linguagens o que permite o reaproveitamento de conhecimentos entre elas.
Chamamos esse modelo de programação de programação reativa. A programação reativa permite que a aplicação converse de forma assíncrona, e além disso permite diversos tipos de manipulações sobre a resposta como transformações, logs, pular eventos, controlar a emissão entre outros. Para isso utiliza-se de um padrão de projeto chamado Observable. Podemos dizer que a programação reativa é o Observable com esteroides.
Nesta aula vamos abordar os principais conceitos do RXJS para que possamos implementar um aplicativo Ionic, tenha em mente que o RXJS tem muitos recursos e possibilidades valendo a pena ser aprofundado, principalmente por ser um conhecimento reutilizável em outras linguagens de programação.
O observable é a interface com o qual nos comunicamos a maior parte do tempo, ele é um objeto que emite eventos e é o que recebemos de uma chamada HTTP por exemplo.
Um Observable pode emitir um evento único e terminar, ou pode emitir múltiplos eventos, em todos caso podemos chamar isso de stream de eventos.
Uma stream pode ser operada de forma a transformar dados, filtrar, mesclar streams e etc. Veremos algumas operações mais adiante.
Para receber os eventos de um Observable temos que fazer um subscribe em um Observable e passar uma função.
Exemplo:
Nesse exemplo modificamos o getItems para ao invés de retornar o valor de um array, retornar um Observable de arrays. Nesse caso criamos o observable com a função of que cria um observable contendo apenas o elemento passado.
O componente que chama o método getItems, tem então que sobrescrever ao observable:
Repare que agora não sabemos quando o Observável vai retornar algo, então a execução da linha será instantânea, e a função lambda passada como parâmetro irá em backgroup atualizar o valor de items.
Como utilizamos a função of para criar itens estáticos, nosso observável vai retornar na mesma hora, mas poderia ser uma chamada http por exemplo e o retorno ser dependente da rede.
O observável só irá começar a emitir eventos, se houver pelo menos um subscriber no mesmo. Como você pode imaginar isso implica que múltiplas classes podem fazer um subscribe em um mesmo observable, todas elas irão receber o mesmo stream de eventos, mas cada um pode manipular da forma que achar melhor seus dados.