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.