347 lines
16 KiB
Markdown
347 lines
16 KiB
Markdown
---
|
||
title: Reactive Extensions
|
||
localeTitle: 反应性扩展
|
||
---
|
||
# Angular中的反应性扩展
|
||
|
||
#### 动机
|
||
|
||
JavaScript的反应性扩展（RxJS）是_可观察_数据流的库。 RxJS在命令行执行`ng new [name-of-application]`时安装Angular。这使用Angular命令行界面（CLI）。 RxJS补充了数据通过`Observable`流程。 `Observable`对象有助于_可迭代_数据的流动。
|
||
|
||
数据流不是主要用例。毕竟，数据流并行事件流。事件发出，因此应用程序知道数据何时到达。虽然事件流构成了RxJS补充的核心，但本文也将它们称为数据流。
|
||
|
||
流同步（立即）或异步（超时）执行。 RxJS通过`Observable`数据流轻松处理这两种情况。严格的异步性是可以转换的。使用内存中的_可迭代_数据会立即发生，而外部数据获取需要时间。 Angular支持RxJS库，因此它可以处理带有数据流的两种用例。
|
||
|
||
#### 反应式编程
|
||
|
||
在深入研究之前，了解支持RxJS库的范例非常重要。如上所述，它通过`Observable`对象工作，该对象简化了事件发射数据。
|
||
|
||
RxJS围绕基本`Observable` 。它的整个图书馆补充了它的功能。 RxJS甚至包括其他对象，包括`Subject` ， `Subscription`和`Observer` 。每个都是它自己的基本`Observable`的自定义变体。
|
||
|
||
RxJS源于反应式编程范例。这种范式引入了_可观察的_模式。在其中存在这个关键思想：单个`Observable`在其所有`Observer`被通知时发出。 `Observer` _订阅_ `Observable`以便他们收到通知。此通知可能意味着几件事。
|
||
|
||
它可能表示数据更改或数据到达，如本文中所述。它可能表示影响`Observer`的应用程序的某些部分发生了变化。
|
||
|
||
这种_可观察的_模式也力图解耦概念。 `Observable`应该能够在没有任何`Observer`的情况下运行，反之亦然。这通常意味着它们可以独立而不是完全相互作用。
|
||
|
||
如果好奇，您可以通过阅读[本维基百科文章](https://en.wikipedia.org/wiki/Reactive_programming)了解有关反应式编程基础的更多信息。本节介绍了本文其余部分所需的内容。
|
||
|
||
#### 观测
|
||
|
||
为了快速重申，可以_观察到_ `Observable` 。这样一个`Observable`可以根据数据流为其依赖项提供反馈。在RxJS中， `Observable`是它自己的工厂函数，用于创建`Observable`对象。他们的基本蓝图如下。
|
||
|
||
```typescript
|
||
import { Observable } from 'rxjs';
|
||
|
||
const observable = Observable.create((source) => {
|
||
source.next(data);
|
||
});
|
||
```
|
||
|
||
`.next`在向观察者发出事件的同时传递数据。 `Observable`使用`.next`从其`.create`回调中发出数据。它接受一个表示要发出的数据的参数。 `Observable`还没有在JavaScript中实现。 RxJS提供了其库的替代品。
|
||
|
||
下一步是观察员。要告诉函数或对象_观察_ `Observable` ，使用以下语法： `observable.subscribe(observer)` 。另一种看待它的方法是`producer.subscribe(consumer)` 。 Observable通过调用`.next` _生成_数据。然后在接收数据时通知消费者。
|
||
|
||
```typescript
|
||
import { Observable } from 'rxjs';
|
||
|
||
const observable = Observable.create((source) => {
|
||
source.next("Hello");
|
||
source.next("World!");
|
||
});
|
||
|
||
observable.subscribe((word) => console.log(word));
|
||
// console output
|
||
/*
|
||
Hello
|
||
World!
|
||
*/
|
||
```
|
||
|
||
两个`.next`调用发生在`Observable`的`.create`回调（数据生成器）中。这导致观察者（数据使用者）的两个单独的控制台输出。
|
||
|
||
`.next`的两次调用表示同步数据流。 Streams将数据概念化为线性有序流。它可以根据数据的可用性同步或异步解析。
|
||
|
||
如果包含流的数据容易获得，则它同步执行。否则，流将超时异步解析。在任何一种情况下，数据的顺序总是相同的，这取决于observable中`.next`的调用。
|
||
|
||
`Observable`像队列一样运行。在一段数据上调用`.next`会将其推送到队列的后面。一旦解决了数据从前面弹出。
|
||
|
||
`Observable`数据流具有巨大的吸引力。它们在顺序上是确定性的，并且根据数据可用性而合理地执行。此外，任何数量的观察者都可以_观察_数据源`Observable` 。这意味着数据可以生成一次并在一次操作中随处发出。
|
||
|
||
回调函数不是使用数据的唯一方法。观察者可以作为生产者和消费者彼此链接。
|
||
|
||
```typescript
|
||
const observableI = Observable.create((source) => {
|
||
source.next("Hello World!");
|
||
});
|
||
|
||
const observableII = new Observable().subscribe((v) => console.log(v));
|
||
|
||
observableI.subscribe(observableII);
|
||
// console output
|
||
/*
|
||
Hello World!
|
||
*/
|
||
```
|
||
|
||
`.subscribe`位于`Observable`对象上。你可以用一个`Observable`作为它的源（生产者）和另一个observable作为它的参数（消费者）来调用它。数据可以通过任意数量的可观察量流动（发射）。
|
||
|
||
#### JavaScript的反应性扩展（RxJS）
|
||
|
||
流数据很好，但是如果observable不能编辑流，那又有什么意义呢？这就是RxJS库发挥作用的地方。它提供了对数据流执行各种突变的运算符。
|
||
|
||
Angular利用这些运算符来转换传入的数据。开发人员可以使用RxJS运算符从传入流中删除任何不必要的数据。这样可以节省内存并减少对额外转换逻辑的需求。
|
||
|
||
RxJS提供与标准`Observable`偏差，如`Subject` ， `Subscription`和`Observer` 。将这些偏差视为传统`Observable`特殊风味。他们没有必要使用图书馆。也就是说，像`Subject`这样的变体具有超越标准`Observable`令人难以置信的用例。
|
||
|
||
本文坚持使用标准的`Observable` 。来自RxJS的所有数据流运算符都通过`Observable`工作。
|
||
|
||
许多核心RxJS运营商来自JavaScript的Array Extras。 Array对象的原型包含许多与RxJS库相似的内容。这些也被称为'额外'。数组是类似于可观察数据流的类似流的结构。
|
||
|
||
为了更好地理解RxJS运算符，本文将简要介绍JavaScript的Array Extras。每个功能几乎与其RxJS对应功能相同。区别仅在于数据的格式（可迭代数组与可迭代流）。
|
||
|
||
#### 阵列附加功能
|
||
|
||
数组包含许多实用方法。这些方法称为Array Extras。它们都存在于Array对象的原型中。下面的列表包含五个与RxJS并行的额外内容。
|
||
|
||
* `.reduce`
|
||
* `.filter`
|
||
* `.map`
|
||
* `.every`
|
||
* `.forEach`
|
||
|
||
对于每个示例，数组迭代自身以产生最终结果。
|
||
|
||
`.reduce`将数组最小化为单个值。 `.filter`使用布尔值评估修剪数组。 `.map`逐个元素地转换数组。 `.every`根据布尔条件计算整个数组的true或false。 `.forEach`遍历数组的元素。
|
||
|
||
数组模型流。它们是彼此按顺序并逐个迭代。 Observable以类似的方式将数据元素简化为他们的观察者。这就是RxJS在其库中包含每个Array Extra的逻辑对应的原因。当然，与Array Extras相比，RxJS提供了更多自己的运算符。
|
||
|
||
#### 基本的RxJS运算符
|
||
|
||
实际上有一整套图书馆的RxJS运营商。本文重点介绍下面列出的Array Extras的启发。
|
||
|
||
* `.reduce`
|
||
* `.filter`
|
||
* `.map`
|
||
* `.every`
|
||
* `.forEach`
|
||
|
||
之前的列表没有任何变化。您对Array Extras的理解适用于RxJS运算符。唯一能看到的是一个名为`.pipe`的函数，在接下来的几个例子中会有很多用处。 `.pipe`链接RxJS运算符。来自前一个运算符的结果将进入下一个运算符直到最终运算符。然后，结果数据从可观察流中发出。
|
||
|
||
请注意下面的标准示例。使用它来比较每个运营商对发出的数据流的影响。
|
||
|
||
```typescript
|
||
import { Observable, from } from 'rxjs';
|
||
|
||
const stream: number[] = [1, 2, 3, 4, 5];
|
||
|
||
const observable: Observable<number> = from(stream);
|
||
observable.subscribe((val: number) => console.log(val));
|
||
|
||
// console output
|
||
/*
|
||
1
|
||
2
|
||
3
|
||
4
|
||
5
|
||
*/
|
||
```
|
||
|
||
`.from`将数组转换为`Observable`对象，该对象在每个数组元素上调用`.next` 。 `.pipe`函数接受任意数量的参数作为数组运算符。这是每个运营商实施的地方。运算符按照它们的实现顺序执行简化数据，作为`.pipe`参数。
|
||
|
||
##### 减少
|
||
|
||
`.reduce`在发出之前将数据流最小化为单个值。
|
||
|
||
```typescript
|
||
import { reduce } from 'rxjs/operators';
|
||
|
||
const stream: number[] = [1, 2, 3, 4, 5];
|
||
|
||
const observable: Observable<number> = from(stream).pipe(
|
||
reduce((accum, val) => (accum + val))
|
||
);
|
||
observable.subscribe((val: number) => console.log(val));
|
||
|
||
// console output
|
||
/*
|
||
15
|
||
*/
|
||
```
|
||
|
||
##### 过滤
|
||
|
||
`.filter`修剪流，消除不满足其条件的流值。
|
||
|
||
```typescript
|
||
import { filter } from 'rxjs/operators';
|
||
|
||
const stream: number[] = [1, 2, 3, 4, 5];
|
||
|
||
const observable: Observable<number> = from(stream).pipe(
|
||
filter((val) => (val % 2 === 0)) // filters out odd numbers
|
||
);
|
||
observable.subscribe((val: number) => console.log(val));
|
||
|
||
// console output
|
||
/*
|
||
2
|
||
4
|
||
*/
|
||
```
|
||
|
||
##### 地图
|
||
|
||
`.map`定位并转换每个正在进行的流值。
|
||
|
||
```typescript
|
||
const stream: number[] = [1, 2, 3, 4, 5];
|
||
|
||
const observable: Observable<number> = from(stream).pipe(
|
||
map((val) => (val + 1))
|
||
);
|
||
observable.subscribe((val: number) => console.log(val));
|
||
|
||
// console output
|
||
/*
|
||
2
|
||
3
|
||
4
|
||
5
|
||
6
|
||
*/
|
||
```
|
||
|
||
##### 挑战：每一个和每一个
|
||
|
||
了解`.every`和`.forEach`作为Array Extras，尝试将它们实现为RxJS运算符。请随意使用前面的示例进行指导。经过大量阅读后，一点点的练习都有很长的路要走！
|
||
|
||
#### Angular中的HTTP
|
||
|
||
本节将RxJS和Angular结合在一起，展示它们如何相互作用。通常，Angular提供的服务将提供`Observable` 。然后， `Observable`的数据流可以使用带有`.pipe` RxJS运算符进行`.pipe` 。
|
||
|
||
Angular通过`@angular/common/http`提供`HttpClient`服务。 `HttpClientModule`也来自`@angular/common/http`并导出`HttpClient`服务。应用程序的根模块必须导入`HttpClientModule` 。这使得`HttpClientModule`从应用程序的任何位置_注入_ 。
|
||
|
||
`HttpClientModule`服务发出HTTP请求。这些请求是异步的。让他们对Angular感兴趣的是如何处理请求。每个请求都会返回一个`Observable` 。 RxJS可以把它带走。
|
||
|
||
即将到来的示例使用由[Typicode](https://jsonplaceholder.typicode.com)构建的公共API。 API为每个异步`GET`请求提供100个元素的数组。
|
||
|
||
```typescript
|
||
// ./models/post.model.ts
|
||
|
||
export interface Post {
|
||
userId: number;
|
||
id: number;
|
||
title: string;
|
||
body: string;
|
||
}
|
||
```
|
||
|
||
```typescript
|
||
// ./services/json.service.ts
|
||
|
||
import { HttpClient } from '@angular/common/http';
|
||
import { Injectable } from '@angular/core';
|
||
|
||
import { Observable, from } from 'rxjs';
|
||
import { switchMap, map, filter, reduce } from 'rxjs/operators';
|
||
|
||
import { Post } from '../models/post.model';
|
||
|
||
@Injectable({
|
||
providedIn: 'root'
|
||
})
|
||
export class JsonService {
|
||
constructor(private http: HttpClient) { }
|
||
|
||
getPostsByUserId(id: number): Observable<any> {
|
||
const trim$ = (stream) => from(stream)
|
||
.pipe(
|
||
filter((post: Post) => +post.userId === +id),
|
||
map((post: Post) => ({ title: post.title, body: post.body })),
|
||
reduce((accum: Post[], post: Post) => accum.concat([post]), [])
|
||
);
|
||
|
||
return this.http.get("https://jsonplaceholder.typicode.com/posts")
|
||
.pipe(
|
||
switchMap((value) => trim$(value))
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
```typescript
|
||
// ./components/example/example.component.ts
|
||
|
||
import { Component } from '@angular/core';
|
||
|
||
import { JsonService } from '../../services/json.service';
|
||
import { Post } from '../../models/post.model';
|
||
|
||
@Component({
|
||
selector: 'app-example',
|
||
template: `
|
||
<h1>Request User Posts</h1>
|
||
<span>User: </span><input #userInput>
|
||
<button (click)="requestForPosts(userInput.value)">REQUEST</button>
|
||
<hr>
|
||
<ul>
|
||
<div *ngIf="userPosts">
|
||
<div *ngFor="let post of userPosts">
|
||
<h3>{{ post.title }}</h3>
|
||
<p>{{ post.body }}</p>
|
||
</div>
|
||
</div>
|
||
<h3 *ngIf="!userPosts">No posts shown...</h3>
|
||
</ul>
|
||
`
|
||
})
|
||
export class ExampleComponent {
|
||
userPosts: Post[];
|
||
|
||
constructor(private json: JsonService) { }
|
||
|
||
requestForPosts(id: number): void {
|
||
this.json.getPostsByUserId(id)
|
||
.subscribe((posts: Post[]) => { this.userPosts = posts.length > 0 ? posts : null; });
|
||
}
|
||
}
|
||
```
|
||
|
||
`json.service.ts`创建一个`Observable`的代表`component.example.ts` 。组件可以订阅返回的`Observable` 。到`Observable`解析数据流时，只会发出一个值。
|
||
|
||
对`jsonplaceholder.typicode.com`的请求产生一个包含100个帖子的单个数组。通过`HttpClient`的请求产生一个`Observable` 。运算符`switchMap`返回另一个`Observable` ，它覆盖当前流。变量`trim$`将`Observable`存储为其值。将`$`附加到用于存储`Observable`的变量是惯例。
|
||
|
||
`from` `jsonplaceholder.typicode.com`将数组转换为100值发射的`Observable` 。然后，RxJS运算符筛选流中的每个数据。他们删除与请求无关的流值。进行数据修剪，以使流值保持不必要的信息。最终结果再次作为单个数组连接在一起，向其观察者发出一个数组。
|
||
|
||
在`component.example.ts` ，JsonService引用返回刚才描述的`Observable` 。此方法在组件模板中单击按钮时调用。模板中的输入框也提供单个`id`参数。
|
||
|
||
按下按钮，JsonService返回一个发出单个数组的`Observable` 。 `.subscribe`对返回的`Observable`调用。然后，该组件将`userPosts`的值设置为等于发出的数组。
|
||
|
||
角度变化检测可以获取类数据的变化。模板更新和`*ngFor`确保`*ngFor`每个数组元素`userPosts`呈现自己的模板元素。
|
||
|
||
#### 结论
|
||
|
||
RxJS提供核心`Observable`及其运算符。该库使用`ng new [name-of-app]` （Angular CLI）从命令行自动安装。 RxJS核心类型和运算符分别下载到`rxjs`和`rxjs/operators` 。
|
||
|
||
即使您不使用CLI， `HttpClient`等服务仍然可用。如果RxJS不可用，则服务返回`Promise`而不是`Observable` 。与`Observable`不同， `Promise`对象是JavaScript的原生对象。这可能会在下一个官方JavaScript版本中发生变化。
|
||
|
||
也就是说，充分利用RxJS！任何可迭代的结构都可以容纳`Observable` 。有了它，整个RxJS库变得可用。其运营商有效地将数据从流转换为结果。此外，观察者可以订阅结果，从而提高数据的整体可移植性。
|
||
|
||
## 来源
|
||
|
||
* [角度团队。 “RxJS库”。 _谷歌_ 2018年6月5日访问。](https://angular.io/guide/rx-library)
|
||
* [福布斯，艾略特。 “使用Angular和Socket.io教程创建实时应用程序”。 _TutorialEdge.net_ ，2017年1月10日。访问2018年6月5日。](https://tutorialedge.net/typescript/angular/angular-socket-io-tutorial)
|
||
* [RxJS团队。 “RxJS文档”。 _RxJS_ 。 2018年6月5日访问。](https://rxjs-dev.firebaseapp.com)
|
||
* [Sukale，Ryan。 “Rxjs主题与可观察之间的差异”。 _TutorialHorizon_ ，2017年3月23日。访问2018年6月5日。](https://javascript.tutorialhorizon.com/2017/03/23/rxjs-subject-vs-observable)
|
||
* [维基百科社区。 “反应式编程”。 _维基百科_ ，2018年6月2日。访问2018年6月5日。](https://en.wikipedia.org/wiki/Reactive_programming)
|
||
|
||
## 资源
|
||
|
||
* [角度文档](https://angular.io/guide)
|
||
* [GitHub上的Angular](https://github.com/angular/angular)
|
||
* [角度CLI](https://cli.angular.io)
|
||
* [RxJS和Angular](https://angular.io/guide/rx-library)
|
||
* [反应式编程](https://en.wikipedia.org/wiki/Reactive_programming)
|
||
* [JavaScript的反应性扩展](https://rxjs-dev.firebaseapp.com) |