Rxjs學(xué)習(xí)之路
1嫡秕、小貼士
這篇文章是我的Angular Rxjs Series中的第二篇文章渴语，在繼續(xù)閱讀本文之前，您至少應(yīng)該熟悉系列中的第一篇基礎(chǔ)文章：
// 圖譜
// ----- 代表一個(gè)Observable
// -----X 代表一個(gè)Observable有錯(cuò)誤發(fā)生
// -----| 代表一個(gè)Observable結(jié)束
// (1234)| 代表一個(gè)同步Observable結(jié)束
// 特別提示：以下的操作符介紹均采用rxjs6的寫(xiě)法＜菪住！掷酗！
2调违、map
1、其實(shí)map操作符和js數(shù)組里的map差不多泻轰，都是傳入一個(gè)callback技肩，執(zhí)行callback回傳新值.
2、具體例子如下代碼：
/**
* 例如： interval(1000).pipe(map(x => x + 1));
* -----0-----1-----2-----3--...
* map(x => x + 1)
* -----1-----2-----3-----4--...
*/
interval(1000).pipe(
map(x => x + 1)
).subscribe({
next: (value) => { console.log('======map操作符: ', value); },
error: (error) => { console.log('======map操作符---Error: ', error); },
complete: () => { console.log('======map操作符: complete'); }
});
3浮声、mapTo
1虚婿、mapTo是把傳進(jìn)來(lái)的值改寫(xiě)成為一個(gè)固定值
2殖告、具體例子如下代碼：
/**
* 例如： interval(1000).pipe(mapTo(2))
* -----0-----1-----2-----3--...
* mapTo(2)
* -----2-----2-----2-----2--...
*/
interval(1000).pipe(
mapTo('mapTo')
).subscribe({
next: (value) => { console.log('======mapTo操作符: ', value); },
error: (error) => { console.log('======mapTo操作符---Error: ', error); },
complete: () => { console.log('======mapTo操作符: complete'); }
});
4、filter
1雳锋、其實(shí)filter操作符和js數(shù)組里的filter也差不多黄绩，都是傳入一個(gè)call back，執(zhí)行callback玷过，根據(jù)回傳的boolean值過(guò)濾源數(shù)據(jù)爽丹，再回傳新值。
2辛蚊、具體例子如下代碼：
/**
* 例如：interval(1000).pipe(filter(x => x % 2 === 0));
* -----0-----1-----2-----3-----4--...
* filter(x => x % 2 === 0)
* -----0-----------2-----------4--...
*/
interval(1000).pipe(
filter(x => x % 2 === 0)
).subscribe({
next: (value) => { console.log('======filter操作符: ', value); },
error: (error) => { console.log('======filter操作符---Error: ', error); },
complete: () => { console.log('======filter操作符: complete'); }
});
完整的例子
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, of, interval, Subscription } from 'rxjs';
import { map, take, mapTo, filter } from 'rxjs/operators';
@Component({
selector: 'app-rxjs-demo',
template: `
<h3>Rxjs Demo To Study! -- Operators操作符(map粤蝎、mapTo、filter)</h3>
<button (click)="originMapHandler()">origin map</button>
<button class="mgLeft" (click)="mapHandler()">map</button>
<button class="mgLeft" (click)="mapToHandler()">mapTo</button>
<button class="mgLeft" (click)="filterHandler()">mapTo</button>
<app-back></app-back>
`,
styles: [`
.mgLeft {
margin-left: 20px;
}
`]
})
export class RxjsDemoComponent implements OnInit, OnDestroy {
originMapSubscription: Subscription;
mapSubscription: Subscription;
mapToSubscription: Subscription;
filterSubscription: Subscription;
constructor() { }
ngOnInit(): void {
// 圖譜
// ----- 代表一個(gè)Observable
// -----X 代表一個(gè)Observable有錯(cuò)誤發(fā)生
// -----| 代表一個(gè)Observable結(jié)束
// (1234)| 代表一個(gè)同步Observable結(jié)束
}
map(source, callback) {
return Observable.create(observer => {
return source.subscribe(
(value) => {
try {
observer.next(callback(value));
} catch (e) {
observer.error(e);
}
},
(err) => { observer.error(err); },
() => { observer.complete(); }
);
});
}
originMapHandler() {
// 1. 傳統(tǒng)寫(xiě)法創(chuàng)建Map操作符
const people = of('Jerry', 'Anna');
const helloPlople = this.map(people, item => item + ' Hello~');
this.originMapSubscription = helloPlople.subscribe({
next: (value) => { console.log('======傳統(tǒng)寫(xiě)法創(chuàng)建Map操作符: ', value); },
error: (error) => { console.log('======傳統(tǒng)寫(xiě)法創(chuàng)建Map操作符---Error: ', error); },
complete: () => { console.log('======傳統(tǒng)寫(xiě)法創(chuàng)建Map操作符: complete'); }
});
}
mapHandler() {
/**
* 例如： interval(1000).pipe(map(x => x + 1));
* -----0-----1-----2-----3--...
* map(x => x + 1)
* -----1-----2-----3-----4--...
*/
this.mapSubscription = interval(1000).pipe(
map(x => x + 1),
take(4)
).subscribe({
next: (value) => { console.log('======map操作符: ', value); },
error: (error) => { console.log('======map操作符---Error: ', error); },
complete: () => { console.log('======map操作符: complete'); }
});
}
mapToHandler() {
/**
* 例如： interval(1000).pipe(mapTo(2))
* -----0-----1-----2-----3--...
* mapTo(2)
* -----2-----2-----2-----2--...
*/
this.mapToSubscription = interval(1000).pipe(
mapTo('mapTo'),
take(3)
).subscribe({
next: (value) => { console.log('======mapTo操作符: ', value); },
error: (error) => { console.log('======mapTo操作符---Error: ', error); },
complete: () => { console.log('======mapTo操作符: complete'); }
});
}
filterHandler() {
/**
* 例如：interval(1000).pipe(filter(x => x % 2 === 0));
* -----0-----1-----2-----3-----4--...
* filter(x => x % 2 === 0)
* -----0-----------2-----------4--...
*/
this.filterSubscription = interval(1000).pipe(
filter(x => x % 2 === 0),
take(5)
).subscribe({
next: (value) => { console.log('======filter操作符: ', value); },
error: (error) => { console.log('======filter操作符---Error: ', error); },
complete: () => { console.log('======filter操作符: complete'); }
});
}
ngOnDestroy() {
if (this.originMapSubscription) {
this.originMapSubscription.unsubscribe();
}
if (this.mapSubscription) {
this.mapSubscription.unsubscribe();
}
if (this.mapToSubscription) {
this.mapToSubscription.unsubscribe();
}
if (this.filterSubscription) {
this.filterSubscription.unsubscribe();
}
}
}
Marble Diagrams【寶珠圖】
1. 這個(gè)Marble Diagrams【寶珠圖】可以很靈活的表現(xiàn)出每個(gè)操作符的使用
2. 下面是超鏈接傳送門(mén)
