在 Angular 中使用 RxJS 的完整指南

前言

RxJS 是一个强大的响应式编程框架，它在 Angular 中得到了广泛应用。通过 RxJS，我们可以轻松处理异步操作并方便地处理事件流。本文将介绍 RxJS 的基本概念、常用操作符及其在 Angular 中的应用。

基本概念

RxJS 通过 Observables 来处理事件流，Observable 是一个可观察的对象，它可以将异步事件转化为一个连续的事件流。使用 Observables，我们可以更加灵活地处理异步操作，并在需要的时候，立刻获取结果。下面是创建一个简单 Observable 的示例代码：

// www.javascriptcn.com code example
import { Observable } from 'rxjs';

const simpleObservable$ = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

simpleObservable$.subscribe(data => console.log(data));

在上面的代码中，我们创建了一个 Observable，并使用 subscribe() 方法来订阅这个 Observable。在 Observable 中，我们可以使用 next() 方法来发送事件，使用 complete() 方法来结束事件流。在输出中，我们将看到 1、2、3 这三个数字顺序输出。

常用操作符

RxJS 中提供了各种各样的操作符来帮助我们处理事件流，并将它们转化成我们需要的形态。下面是一些常用的操作符：

map

该操作符将当前的事件转化成另一个事件。比如我们有一个事件流，每个事件都是一个数字，我们希望将这些数字加一后再输出。我们可以使用 map 操作符来实现：

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const observable$ = of(1, 2, 3);
observable$.pipe(
  map(value => value + 1)
).subscribe(data => console.log(data));

在上面的代码中，我们首先创建了一个 observable，然后使用 map 操作符将每个事件都加一，最后输出变化后的事件流。

filter

该操作符将当前事件流中符合条件的事件过滤出来，形成一个新的事件流。比如我们有一个事件流，每个事件都是一个数字，我们希望输出只是偶数的事件流，我们可以使用 filter 操作符来过滤：

import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

const observable$ = of(1, 2, 3, 4, 5);
observable$.pipe(
  filter(value => value % 2 === 0)
).subscribe(data => console.log(data));

在上面的代码中，我们首先创建了一个 observable，然后使用 filter 操作符过滤出偶数事件，最后输出这个事件流。

tap

该操作符对当前的事件流不做任何变化，只是在处理事件流的过程中，执行一些副作用操作，比如调试、日志记录等。比如我们有一个事件流，每个事件都是一个数字，我们希望输出每个事件的值，同时在控制台中打印出这个事件的值。我们可以使用 tap 操作符来实现：

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

const observable = of(1, 2, 3);
observable.pipe(
  tap(value => console.log(value))
).subscribe(data => console.log(data));

在上面的代码中，我们首先创建了一个 observable，然后使用 tap 操作符在输出每个事件的值的同时，在控制台中打印出这个事件的值，最后输出这个事件流。

在 Angular 中使用 RxJS

在 Angular 中，我们可以使用 RxJS 处理各种异步操作，比如获取远程数据、响应用户事件等。下面是一些常见的应用场景：

获取远程数据

获取远程数据是前端开发中最常见的异步操作之一。使用 RxJS，我们可以通过订阅一个 http 请求的 Observable 来获取远程数据。比如：

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Products';
  products$: Observable<any>;

  constructor(private http: HttpClient) {
    this.products$ = this.http.get('https://fakestoreapi.com/products');
  }
}

在上面的代码中，我们首先引入了 HttpClient，并在 constructor 中从服务器获取了产品列表。在模板中，我们可以通过 async pipe 将 products$ 这个 Observable 转变成模板引擎可以直接使用的对象：

// www.javascriptcn.com code example
<h1>{{ title }}</h1>

<ul>
  <ng-container *ngIf="products$ | async as products; else showSpinner">
    <li *ngFor="let product of products">
      {{ product.title }}
      <img [src]="product.image" [alt]="product.title" [title]="product.title" />
    </li>
  </ng-container>
</ul>

<ng-template #showSpinner>
  <p>Loading...</p>
</ng-template>

处理用户事件

处理用户事件也是前端开发中的一个常见任务。使用 RxJS，我们可以简单且灵活地处理各种用户事件，比如点击、输入、滚动等等。比如：

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { fromEvent } from 'rxjs';
import { map, filter, throttleTime } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  searchValue: string;

  constructor() {
    fromEvent(document.getElementById('search-box'), 'input').pipe(
      map((event: any) => event.target.value),
      filter(value => value.length > 2),
      throttleTime(500)
    ).subscribe(searchTerm => {
      this.searchValue = searchTerm;
      console.log(searchTerm);
    });
  }
}

在上面的代码中，我们使用 fromEvent 操作符来创建一个事件流，该事件流订阅 document.getElementById('search-box') 上的 input 事件。我们使用 map 操作符将事件流中的事件转化成输入框中的值，再使用 filter 过滤长度小于等于 2 的字符串，最后使用 throttleTime 操作符将事件流中的事件流拦截，从而减少请求的个数。最后，在 subscribe 中，我们将每个事件赋值给 searchValue，并在控制台中打印出这个事件值。

结语

RxJS 是一个强大的响应式编程框架，使用它可以更好地处理异步事件流，并更加灵活地响应用户事件。本文介绍了 RxJS 的基本概念、常用操作符，以及它在 Angular 中的应用。希望这篇文章能帮助新手更好地学习 RxJS，在实际开发中更加游刃有余。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d67e4ea941bf7134c46930