Jornada Frontend

O que é um Observable RxJs + Angular?

É uma técnica que lida com compartilhamento de dados, é muito usado no Angular e pode ser considerado uma versão melhor de uma promise.

A promise pode retornar apenas um valor e não pode ser cancelada o “observable” pode retornar um fluxo de valores e pode ser cancelado. Existem três callbacks:

  • Complete();
  • Next();
  • Error().

Reatividade e RxJS

Estamos falando de programação assíncrona e emitir valores, erros e manipulação de dados a criação de todo um fluxo.

RxJS (Reactive Extensions Library for JavaScript) é uma biblioteca que facilita o uso de assíncrono.

Como criar um Observable com um construtor

O observable começa a emitir dados assim que um observer for inscrito nele. O observable vai usar o “next()” assim que o valor for passado para o argumento.

Se um erro ocorrer ele usa o “error()”, assim que for completo ele usa o “complete()”.

Agora que sabemos mais ou menos como funciona, vamos criar um exemplo simples dentro do próprio arquivo “app”.

O RxJS é um bundle dentro do Angular e já vem instalado, mas ainda assim temos que incluí-lo dentro do component para usar.

A maneira mais simples de criar um observable  é usar o construtor Observable.

Como um argumento o construtor pode receber uma “function” e até mesmo uma “arrow function”. A sintaxe com arrow function ficaria assim:

Uma function padrão seria desta forma:

Em ambos os casos nós devemos usar o “observer” como objeto para podermos usar o método de callback.

Vamos criar um exemplo com arrow function.

O “meuObservable” foi declarado como um Observable, porém ele não foi instanciado e não pode emitir os valores, para isso precisamos fazer um “subscribe” nele. E para isso nós vamos usar o método “subscribe()”. 

A Sintaxe:

Vamos fazer em nosso observable:

Agora se abrirmos o console, vamos ver os números de 1 a 5 em linhas separadas, podemos também usar o “error()” e o “complete()”.

Vamos ver que ele para antes de emitir o erro e o mesmo vale para o “complete()”.

Como criar um Observable como o método create()

Uma das maneiras mais fáceis de criar um Observable é usando o método “create()”.

Como criar um Observable com o operardor of

Precisamos importar o “of” do “rxjs” e podemos passar praticamente qualquer coisa para o operador “of” os argumentos serão emitidos separadamente e na ordem.

Uma maneira de mostrar duas strings.

Cada um dos argumentos é mostrado separadamente no console.

Como criar um Observable com o operador from

O operador “from” pode pegar qualquer coisa que possa ser iterada e converte em um observable e ao contrário do “of” ele aceita apenas um argumento.

Vamos pensar em uma string que é tecnicamente um array de letras.

Quando olhamos no console, vemos que cada letra foi mostrada em uma linha diferente.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This