O que é um Observable RxJs + Angular?

Conteúdo

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.

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {}

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:

let objeto = new Observable((observer) => {
  // Logica
})

Uma function padrão seria desta forma:

let objeto = new Observable(nome_function);
 
function nome_function (observer) {
  // Lógica
}

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

let objeto = new Observable((observer) => {
  observer.next();
})
// Ou:
let objeto = new Observable(nome_function);
 
function nome_function (observer) {
  observer.next();
}

Vamos criar um exemplo com arrow function.

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  meuObservable = new Observable((observer) => {
    console.log('Aqui começa o Observable');
 
    observer.next('1');
    observer.next('2');
    observer.next('3');
    observer.next('4');
    observer.next('5');
  });
}

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:

ngOnInit() {
  this.meuObservable.subscribe();
}

Vamos fazer em nosso observable:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  meuObservable = new Observable((observer) => {
    console.log('Aqui começa o Observable');
 
    observer.next('1');
    observer.next('2');
    observer.next('3');
    observer.next('4');
    observer.next('5');
  });
 
  ngOnInit() {
    this.meuObservable.subscribe(
      value => { console.log(value) }
    )
  }
}

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()”.

meuObservable = new Observable((observer) => {
    console.log('Aqui começa o Observable');
 
    observer.next('1');
    observer.next('2');
    observer.error('ERRO!');
    observer.next('4');
    observer.next('5');
  });

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

  meuObservable = new Observable((observer) => {
    console.log('Aqui começa o Observable');
 
    observer.next('1');
    observer.next('2');
    observer.complete('COMPLETO!');
    observer.next('4');
    observer.next('5');
  });

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

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

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  ngOnInit() {
 
    const meuObservable = Observable.create((observer: any) => {
      console.log('Starting observable');
 
      setTimeout(() => { observer.next('1') }, 1000);
      setTimeout(() => { observer.next('2') }, 4000);
      setTimeout(() => { observer.next('3') }, 6000);
      setTimeout(() => { observer.next('4') }, 8000);
      setTimeout(() => { observer.next('5') }, 10000);
    });
 
    meuObservable.subscribe(
      (value: any) => { console.log(value) }
    )
  }
}

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.

import { of } from 'rxjs';

Uma maneira de mostrar duas strings.

import { Component } from '@angular/core';
import { of } from 'rxjs';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  ngOnInit() {
 
    const meuObservable = of('Dener', 'Troquatte');
 
    meuObservable.subscribe(
      value => { console.log(value) }
    )
  }
}

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.

import { from } from 'rxjs';

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

import { Component } from '@angular/core';
import { from } from 'rxjs';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  ngOnInit() {
    const meuObservable = from('Dener');
 
    myObservable.subscribe(
      value => { console.log(value) }
    )
  }
}

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

O que é um Observable RxJs + Angular?

O que é um Observable RxJs + Angular?

Reatividade e RxJS

Como criar um Observable com um construtor

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

Como criar um Observable com o operardor of

Como criar um Observable com o operador from

Difícil de aprender?

1 Comentário

Enviar Comentário Cancelar resposta

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

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

O que é um Observable RxJs + Angular?

O que é um Observable RxJs + Angular?

Reatividade e RxJS

Como criar um Observable com um construtor

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

Como criar um Observable com o operardor of

Como criar um Observable com o operador from

Difícil de aprender?

1 Comentário

Enviar Comentário Cancelar resposta

Tenha uma carreiraFront-end de Sucesso!

Ebook - JORNADA FRONT-END

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

Tenha uma carreira
Front-end de Sucesso!