Używanie Obserwacji z różnych źródeł

W powyższym przykładzie stworzyliśmy Observables od podstaw, co jest szczególnie przydatne w zrozumieniu anatomii Observable.

Jednakże często tworzymy Observables z callbacków, obietnic, zdarzeń, kolekcji lub używając wielu operatorów dostępnych w API.

Obserwowalne zdarzenia HTTP

Powszechną operacją w dowolnej aplikacji internetowej jest pobieranie lub publikowanie danych na serwerze. Aplikacje Angular robią to z biblioteką Http, która poprzednio używałaPromises do działania w sposób asynchroniczny. Zaktualizowana biblioteka Http zawiera terazObservables do uruchamiania zdarzeń i pobierania nowych danych. Zobaczmy przykład:

import {Component} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/Rx';

@Component({
    selector: 'app',
    template: `
      <b>Angular HTTP requests using RxJs Observables!</b>
      <ul>
        <li *ngFor="let doctor of doctors">{{doctor.name}}</li>
      </ul>

      `
})

export class MyApp {
  private doctors = [];

  constructor(http: Http) {
    http.get('http://jsonplaceholder.typicode.com/users/')
        .flatMap((data) => data.json())
        .subscribe((data) => {
          this.doctors.push(data);

        });
  }
}

Zobacz przykład [043]

Ten prosty przykład opisuje, w jaki sposób popularne funkcje biblioteki Http, takie jakget, post,put i delete, zwracająObservables, które pozwalają nam asynchronicznie przetwarzać dane wynikowe. Wykorzystana jest do tego funkcja flatMap. która zamenia kolekcję danych na obiekt klasy Observabe dostaczający te dane jedną po drugiej (https://yakovfain.com/2017/09/07/rxjs-essentials-part-5-the-flatmap-operator/)j.

Obserwowalne zdarzenia formularzy

Podobnie wykorzystuje się Observables w formularzach Angular. Każde pole w formularzu jest traktowane jako Observable. Możemy je zatem subskrybować i odsłuchać dla wszelkich zmian dokonanych w wartości tego pola.

import {Component} from '@angular/core';
import {FormControl, FormGroup, FormBuilder} from '@angular/forms';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';

@Component({
    selector: 'app-root',
    template: `
      <form [formGroup]="coolForm"><input formControlName="email"></form>
      <div><b>You Typed Reversed:</b> {{data}}</div>
    `
})

export class AppComponent {

    email: FormControl;
    coolForm: FormGroup;
    data: string;

    constructor(private fb: FormBuilder) {
      this.email = new FormControl();  
      this.coolForm = fb.group({
        email: this.email
    });

    this.email.valueChanges
    .filter(n=>n)
    .map(n=>n.split('').reverse().join(''))
    .subscribe(value => this.data = value);
    }
}

Zobacz przykład [044]

Tutaj stworzyliśmy nową formę poprzez zainicjowanie nowego pola FormControl i dodanie go do grupy FormGroup związanej z formularzem HTML coolForm. Pole Control ma właściwość.valueChanges, która zwraca Observable,. Możemy ją zatem subskrybować. Teraz, gdy użytkownik wpisze coś w polu, otrzymamy go natychmiast. Przy okazji wykorzystano mapowanie (map) i filtrowanie (filter) - co zostanie wyjaśnione w następnym rozdziale.