![3215e17f60a4c26bba76236131e12750.png](https://i-blog.csdnimg.cn/blog_migrate/54cc3e2e8e7ff5fc2d1a4ad674022455.png)
简介
RxJS
是ReactiveX
编程理念的JavaScript
版本。ReactiveX
来自微软,它是一种针对异步数据流的编程。简单来说,它将一切数据,包括HTTP请求,DOM事件或者普通数据等包装成流的形式,然后用强大丰富的操作符对流进行处理,使你能以同步编程的方式处理异步数据,并组合不同的操作符来轻松优雅的实现你所需要的功能。
RxJS 提供了一种对 Observable
类型的实现,直到 Observable
成为了 JavaScript 语言的一部分并且浏览器支持它之前,它都是必要的。这个库还提供了一些工具函数,用于创建和使用可观察对象。这些工具函数可用于:
- 把现有的异步代码转换成可观察对象
- 迭代流中的各个值
- 把这些值映射成其它类型
- 对流进行过滤
- 组合多个流
初级核心概念
- Observable: 一系列值的生产者
- Observer: 它是observable值的消费者
- Operator: 可以在数据流的途中对值进行转换的操作符
Observables 作为被观察者,是一个值或事件的流集合;而 Observer 则作为观察者,根据 Observables 进行处理。
Observables 与 Observer 之间的订阅发布关系(观察者模式) 如下:
- 订阅:Observer 通过 Observable 提供的 subscribe() 方法订阅 Observable。
- 发布:Observable 通过回调 next 方法向 Observer 发布事件。
创建Observable
RxJS 中提供了很多操作符,用于创建 Observable 对象,常用的操作符如下:
- of(), 将普通JavaScript数据转为 Observable
- from(), 把数组或iterable对象转换成Observable
- create(), 返回一个可以在Observer上调用方法的Observable.
- fromEvent(), 把event转换成Observable.
- fromPromise(), 把Promise转换成Observable.
- ajax(), 从ajax创建一个observable
of()
import { Component, OnInit } from '@angular/core';
import { Observable,of } from 'rxjs';
@Component({
selector: 'app-observable',
templateUrl: '
<h2>使用of来创建可观察对象</h2>
<div>
<button (click)="getData()">Click here</button>
</div>
'
})
export class ObservableComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
getData() {
// Create simple observable that emits three values
const myObservable = of(1, 2, 3);
// Create observer object
const myObserver = {
next: x => console.log('Observer got a next value: ' + x),
error: err => console.error('Observer got an error: ' + err),
complete: () => console.log('Observer got a complete notification'),
};
// Execute with the observer object
myObservable.subscribe(myObserver);
}
}
启动该项目,打开页面并点击按钮,出现这样的结果:
![30a572ea4ee1e5a231014ea62b0ae003.png](https://i-blog.csdnimg.cn/blog_migrate/a8e9e715f46dcae8be9a0b2d7c15afab.png)
from()
import { Component, OnInit } from '@angular/core';
import { Observable,from } from 'rxjs';
@Component({
selector: 'app-observable',
templateUrl: '
<h2>使用from函数创建可观察对象</h2>
<div>
<button (click)="fromData()">根据数组创建Observable</button>
</div>
'
})
export class ObservableComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
fromData() {
let persons = [
{ name: 'Dave', age: 34, salary: 2000 },
{ name: 'Nick', age: 37, salary: 32000 },
{ name: 'Howie', age: 40, salary: 26000 },
{ name: 'Brian', age: 40, salary: 30000 },
{ name: 'Kevin', age: 47, salary: 24000 },
];
const myObservable = from(persons);
myObservable.subscribe(person => console.log(person));
}
}
页面测试结果为:
![094229eaf64a1c5982d302f39bd88f13.png](https://i-blog.csdnimg.cn/blog_migrate/c5f9855ee38b5abd6aaf1e67b128da71.jpeg)
fromEvent()
import { Component, OnInit } from '@angular/core';
import { Observable,fromEvent } from 'rxjs';
@Component({
selector: 'app-observable',
templateUrl: '
<h2>使用fromEvent函数创建可观察对象</h2>
<div>
<p id="content">Hello Hresh</p>
</div>
'
})
export class ObservableComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.fromEvent();
}
fromEvent() {
const el = document.getElementById('content');
const mouseMoves = fromEvent(el, 'click');
const subscription = mouseMoves.subscribe(() => {
el.style.color = 'red';
});
}
}
运行项目,点击文本,文本将会变为红色。
关于 fromEvent 在实际生产中有个典型的应用:输入提示(type-ahead)建议。
可观察对象可以简化输入提示建议的实现方式。典型的输入提示要完成一系列独立的任务:
- 从输入中监听数据。
- 移除输入值前后的空白字符,并确认它达到了最小长度。
- 防抖(这样才能防止连续按键时每次按键都发起 API 请求,而应该等到按键出现停顿时才发起)
- 如果输入值没有变化,则不要发起请求(比如按某个字符,然后快速按退格)。
- 如果已发出的 AJAX 请求的结果会因为后续的修改而变得无效,那就取消它。
完全用 JavaScript 的传统写法实现这个功能可能需要大量的工作。使用可观察对象,你可以使用这样一个 RxJS 操作符的简单序列:
import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
const searchBox = document.getElementById('search-box');
const typeahead = fromEvent(searchBox, 'input').pipe(
map((e: KeyboardEvent) => (e.target as HTMLInputElement).value),
filter(text => text.length > 2), //判断输入内容长度是否大于2
debounceTime(500), //等待,直到用户停止输入(这个例子中是停止 1/2 秒)
distinctUntilChanged(), // 等待搜索文本发生变化。
switchMap(() => ajax('/api/endpoint')) //将搜索请求发送到服务。
);
typeahead.subscribe(data => {
// Handle the data from the API
});
fromPromise()
import { Component, OnInit } from '@angular/core';
import { from, Observable } from 'rxjs';
import { fromPromise } from 'rxjs/internal/observable/fromPromise';
@Component({
selector: 'app-observable',
templateUrl: '
<h2>使用from函数创建可观察对象</h2>
<div>
<button (click)="fromPromiseData()">根据Promise创建Observable</button>
</div>
'
})
export class ObservableComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
fromPromiseData() {
const myObservable = fromPromise(new Promise((resolve, reject) => {
setTimeout(() => {
// tslint:disable-next-line:prefer-const
let username = 'hresh----Promise';
resolve(username);
}, 2000);
}));
myObservable.subscribe({
next(data) { console.log(data); },
error(err) { console.error('Error' + err); },
complete() { console.log('completed'); }
});
}
}
在 Rxjs6 之后,from 可以用来代替 fromPromise,所以上述代码改为 from()也是可以的。页面测试结果为:
![d1e9a77d421417d964cdd4ca4765e172.png](https://i-blog.csdnimg.cn/blog_migrate/13c9656938ec9d0afac8773d7ed3e4d2.png)
这里扩展一下,官方文档有个案例是通过 fetch 方法返回 Promise 对象,这里我做了一些修改:
import { Component, OnInit } from '@angular/core';
import { from, Observable } from 'rxjs';
import { fromPromise } from 'rxjs/internal/observable/fromPromise';
@Component({
selector: 'app-observable',
templateUrl: '
<h2>使用from函数创建可观察对象</h2>
<div>
<button (click)="fromPromiseData()">根据Promise创建Observable</button>
<br>
<button (click)="fromData2()">根据Promise得到的数组创建Observable</button>
</div>
'
})
export class ObservableComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
fromPromiseData() {
const myObservable = from(fetch('http://a.itying.com/api/productlist'));
myObservable.subscribe({
next(data) { console.log(data); },
error(err) { console.error('Error' + err); },
complete() { console.log('completed'); }
});
}
fromData2() {
//fetch()返回的Promise,获取Promise对象中的内容,即数组
let arrayData = [];
fetch('http://a.itying.com/api/productlist').then(response => response.json()).then((data => {
arrayData = data.result;
}));
let myObservable = null;
setTimeout(() => {
myObservable = from(arrayData);
myObservable.subscribe(data => console.log(data));
}, 2000);
}
}
页面测试结果为:
![821f1a611927cb07be0de645f26b68d7.png](https://i-blog.csdnimg.cn/blog_migrate/e8ca68e1d7f076f586d758790e9d0369.jpeg)
interval()
import { Component, OnInit } from '@angular/core';
import { interval, Observable } from 'rxjs';
@Component({
selector: 'app-observable',
templateUrl: '
<h2>使用interval函数创建可观察对象</h2>
<div>
<button (click)="interval2()">根据interval创建Observable</button>
</div>
'
})
export class ObservableComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
interval2() {
const secondsCounter = interval(1000);
// Subscribe to begin publishing values
const oData = secondsCounter.subscribe(n =>
console.log(`It's been ${n} seconds since subscribing!`));
setTimeout(() => {
console.log('取消计数操作');
oData.unsubscribe(); /*5s后取消数据显示*/
}, 5000);
}
}
interval 操作符支持一个数值类型的参数,用于表示定时的间隔。上面代码表示每隔 1s,会输出一个递增的值,初始值从 0 开始。页面测试结果为:
![92f071df8ead56d11732163b5b6f4c6f.png](https://i-blog.csdnimg.cn/blog_migrate/d57df01f6307cb56eb651250ed76056a.jpeg)
ajax()
import { Component, OnInit } from '@angular/core';
import {ajax} from 'rxjs/ajax';
@Component({
selector: 'app-observable',
templateUrl: '
<h2>使用ajax函数创建可观察对象</h2>
<div>
<button (click)="ajax2()">根据ajax创建Observable</button>
</div>
'
})
export class ObservableComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
ajax2(){
const apiData = ajax('http://a.itying.com/api/productlist');
// Subscribe to create the request
apiData.subscribe(res => console.log(res.status, res.response));
}
}
页面测试结果:
![737aaee606ccaa38b6d18040269dc586.png](https://i-blog.csdnimg.cn/blog_migrate/f62b763960c7f86f142874bc9dcd6d3f.jpeg)
操作符(Operators)
上述我们讲解的创建 Observable 的方法其实就是 Rxjs 的操作符,操作符是基于可观察对象构建的一些对集合进行复杂操作的函数。RxJS 还定义了一些操作符,比如 map()
、filter()
、concat()
和 flatMap()
。
操作符接受一些配置项,然后返回一个以来源可观察对象为参数的函数。当执行这个返回的函数时,这个操作符会观察来源可观察对象中发出的值,转换它们,并返回由转换后的值组成的新的可观察对象。
![118f0a6c7452201ab50205c29cccde95.png](https://i-blog.csdnimg.cn/blog_migrate/1768c8739a009edca235cfbd4bbbfe11.png)
map
import { map } from 'rxjs/operators';
const nums = of(1, 2, 3);
const squareValues = map((val: number) => val * val);
const squaredNums = squareValues(nums);
squaredNums.subscribe(x => console.log(x));
// Logs
// 1
// 4
// 9
可以看到 map 接受一个 function 作为参数, 通过该 function 可以把每个元素做平方运算进行转换.。
filter
你可以使用管道来把这些操作符链接起来。管道让你可以把多个由操作符返回的函数组合成一个。pipe()
函数以你要组合的这些函数作为参数,并且返回一个新的函数,当执行这个新函数时,就会顺序执行那些被组合进去的函数。
应用于某个可观察对象上的一组操作符就像一个处理流程 —— 也就是说,对你感兴趣的这些值进行处理的一组操作步骤。这个处理流程本身不会做任何事。你需要调用 subscribe()
来通过处理流程得出并生成一个结果。
import { filter, map } from 'rxjs/operators';
const nums = of(1, 2, 3, 4, 5);
// Create a function that accepts an Observable.
const squareOddVals = pipe(
filter((n: number) => n % 2 !== 0),
map(n => n * n)
);
// Create an Observable that will run the filter and map functions
const squareOdd = squareOddVals(nums);
// Subscribe to run the combined functions
squareOdd.subscribe(x => console.log(x));
// Logs
// 1
// 9
// 25
pipe()
函数也同时是 RxJS 的 Observable
上的一个方法,所以你可以用下列简写形式来达到同样的效果:
import { filter, map } from 'rxjs/operators';
const squareOdd = of(1, 2, 3, 4, 5)
.pipe(
filter(n => n % 2 !== 0),
map(n => n * n)
);
// Subscribe to get values
squareOdd.subscribe(x => console.log(x));
share
在讲解 share 操作符前,我们需要了解一下冷热两种模式下的 Observables。官方定义如下:
Cold Observables 在被订阅后运行,也就是说,observables 序列仅在 subscribe 函数被调用后才会推送数据。与 Hot Observables 不同之处在于,Hot Observables 在被订阅之前就已经开始产生数据,例如
mouse move
事件。
从原理来说是这样的: Cold内部会创建一个新的数据生产者, 而Hot则会一直使用外部的数据生产者.
举个例子:
Cold: 就相当于我在B站看英雄联盟赛事重播,可以从头看起。
Hot: 就相当于看英雄联盟赛事直播, 如果来晚了, 那么前面就看不到了。
share() 操作符允许多个订阅者共享同一个 Observable. 也就是把 Cold 变成 Hot。看如下示例:
import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';
import { share, take } from 'rxjs/operators';
@Component({
selector: 'app-observable',
templateUrl: '
<h2>share操作符</h2>
<div>
<button (click)="shareData()">Click</button>
</div>
'
})
export class ObservableComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
shareData() {
const numbers = interval(1000).pipe(
take(5),
share()
);
function subscribeToNumbers(name) {
numbers.subscribe(
x => console.log(`${name}: ${x}`)
);
}
subscribeToNumbers('Dave');
const anotherSubscription = () => subscribeToNumbers('Nick');
setTimeout(anotherSubscription, 2500);
}
}
页面测试结果为:
![9793730a33f2261ffe54d2e76b0268e4.png](https://i-blog.csdnimg.cn/blog_migrate/499792ae4b3cee3f6d9771b9bda49769.png)
这里 interval 是每隔1秒产生一个数据, take(5)表示取5个数, 也就是1,2,3,4,5,然后 share()就把这个 observable 从 cold 变成了 hot 的。后边 Dave 进行了订阅,2.5秒以后, Nick 进行了订阅。
其他
RxJS 提供了很多操作符,不过只有少数是常用的。 如下图所示:
![6f9837a1fa7dade534ac3020e233525c.png](https://i-blog.csdnimg.cn/blog_migrate/a93017620255f1b550474d5fc5bc5ee4.png)
关于这些操作符的使用可以参看 RxJS 系列之三 - Operators 详解 和 RxJS API 文档。
错误处理
除了可以在订阅时提供 error()
处理器外,RxJS 还提供了 catchError
操作符,它允许你在管道中处理已知错误。
假设你有一个可观察对象,它发起 API 请求,然后对服务器返回的响应进行映射。如果服务器返回了错误或值不存在,就会生成一个错误。如果你捕获这个错误并提供了一个默认值,流就会继续处理这些值,而不会报错。
import { ajax } from 'rxjs/ajax';
import { map, catchError } from 'rxjs/operators';
// Return "response" from the API. If an error happens,
// return an empty array.
const apiData = ajax('http://a.itying.com/api/productlist').pipe(
map(res => {
if (!res.response) {
throw new Error('Value expected!');
}
return res.response;
}),
catchError(err => of([]))
);
apiData.subscribe({
next(x) { console.log('data: ', x); },
error(err) { console.log('errors already caught... will not run'); }
});
页面测试结果:
![670f9840ab02181d9b0b3cf8dc1d64f4.png](https://i-blog.csdnimg.cn/blog_migrate/195cb0822ee22bb8c4dd78a530ae9ac3.png)
重试失败的可观察对象
catchError
提供了一种简单的方式进行恢复,而 retry
操作符让你可以尝试失败的请求。
可以在 catchError
之前使用 retry
操作符。它会订阅到原始的来源可观察对象,它可以重新运行导致结果出错的动作序列。如果其中包含 HTTP 请求,它就会重新发起那个 HTTP 请求。
下列代码把前面的例子改成了在捕获错误之前重发请求:
import { ajax } from 'rxjs/ajax';
import { map, retry, catchError } from 'rxjs/operators';
const apiData = ajax('/api/data').pipe(
retry(3), // Retry up to 3 times before failing
map(res => {
if (!res.response) {
throw new Error('Value expected!');
}
return res.response;
}),
catchError(err => of([]))
);
apiData.subscribe({
next(x) { console.log('data: ', x); },
error(err) { console.log('errors already caught... will not run'); }
});
注意:不要重试登录认证请求,这些请求只应该由用户操作触发。我们肯定不会希望自动重复发送登录请求导致用户的账号被锁定。
问题记录
fromPromise no longer exported in master (v6)
RxJS version:
6.0.0-alpha.3
Code to reproduce:
import { fromPromise } from 'rxjs';
Expected behavior:
should work just as it did with v5.5 (but different location)
解决办法:统一使用 from 来代替 fromPromise。
参考文献
关于Angular6版本升级和RXJS6新特性的讲解
RxJS: 简单入门
RxJS 系列之二 - Observable 详解
RxJS 系列之三 - Operators 详解
RxJS速成 (上)