RXJS在Angular中应用总结（上篇）

文章目录

前言

在 Angular 的管理信息系统（MIS）项目中，RxJS 主要有以下常见的应用场景：
（本篇介绍前三个场景）

异步操作：RxJS 的核心功能是处理异步操作，例如发起 HTTP 请求、setTimeout、WebSocket 等。

状态管理：可以利用 BehaviorSubject 来创建一个可观察的数据流，这对于状态管理非常有用。例如，可以使用它来共享用户的登录状态、主题设置等。

表单处理：Angular 的表单模块和 RxJS 一起工作得很好。例如，当表单的值发生变化时，可以使用 valueChanges Observable，并结合 debounceTime、filter、map 等操作符进行复杂的表单验证。

路由管理：Angular 的 Router 模块提供了一系列的 Events Observables，你可以订阅这些 Observables 来处理路由导航开始、结束、取消等事件。

通信：如果你的应用需要使用到 Websocket 或者 Server-Sent Events，RxJS 提供了一种简单的方式来处理这些通信过程。

UI 交互：RxJS 可以用于处理复杂的用户交互，例如，防抖（debounce）和节流（throttle）、拖拽操作等。

错误处理：使用 RxJS，你可以很方便的处理错误和进行重试。例如，如果 HTTP 请求失败，你可以使用 retry 或 retryWhen 操作符进行重试。

合并多个异步操作：使用 forkJoin、combineLatest 或 zip 等操作符，可以把多个 Observables 合并起来，等待它们全部完成。

轮询：如果你需要定期检查服务器上的数据变化，可以使用 interval 或 timer 函数结合 switchMap 操作符来创建一个轮询。

提示：以下是本篇文章正文内容，下面案例可供参考

一、异步操作

假设我们要从一个 API 服务器上获取数据，并在用户的界面上显示出来。我们可以使用 Angular 的 HttpClient 模块来发起 HTTP 请求，然后用 NG-ZORRO 的组件来显示数据。

首先，我们创建一个服务 DataService 来发起 HTTP 请求：

代码如下（示例）：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

然后，我们创建一个组件 DataComponent 来显示数据：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  template: `
    <nz-spin *ngIf="loading"></nz-spin>
    <nz-table [nzData]="data" *ngIf="!loading"></nz-table>
  `
})
export class DataComponent implements OnInit {
  data: any[] = [];
  loading = true;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(
      data => {
        this.data = data;
        this.loading = false;
      },
      error => {
        console.error(error);
        this.loading = false;
      }
    );
  }
}

在这个例子中，DataService 使用 HttpClient 的 get 方法来发起 HTTP 请求。get 方法返回一个 Observable，这个 Observable 在请求成功时会发出服务器返回的数据。

DataComponent 在初始化时，调用 DataService 的 getData 方法来获取数据，并订阅返回的 Observable。在数据成功获取后，我们将数据赋值给 data 变量，并将 loading 变量设置为 false，以隐藏加载指示器。如果请求失败，我们将错误记录到控制台，并将 loading 变量设置为 false。

在组件的模板中，我们使用了 NG-ZORRO 的 nz-spin 组件来显示加载指示器，以及 nz-table 组件来显示数据。当 loading 变量为 true 时，显示加载指示器；当 loading 变量为 false 时，显示数据表格。

二、状态管理

首先，我们需要创建一个服务来管理用户的登录状态。在这个例子中，我们将使用 BehaviorSubject 来表示用户的登录状态：

代码如下（示例）：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  private loggedIn = new BehaviorSubject<boolean>(false); // 默认用户未登录

  get isLoggedIn(): Observable<boolean> {
    return this.loggedIn.asObservable(); // 提供一个获取登录状态的 Observable
  }

  login(): void {
    // 假设登录验证通过
    this.loggedIn.next(true); // 更新登录状态
  }

  logout(): void {
    this.loggedIn.next(false); // 更新登录状态
  }
}

然后，我们可以在组件中使用 AuthService 来显示用户的登录状态，并提供登录和注销的按钮：

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-login',
  template: `
    <div *ngIf="isLoggedIn | async; else loggedOut">
      <button nz-button nzType="primary" (click)="logout()">Logout</button>
    </div>
    <ng-template #loggedOut>
      <button nz-button nzType="primary" (click)="login()">Login</button>
    </ng-template>
  `,
})
export class LoginComponent implements OnInit {
  isLoggedIn: Observable<boolean>;

  constructor(private authService: AuthService, private message: NzMessageService) {}

  ngOnInit(): void {
    this.isLoggedIn = this.authService.isLoggedIn;
  }

  login(): void {
    this.authService.login();
    this.message.success('Logged in!');
  }

  logout(): void {
    this.authService.logout();
    this.message.success('Logged out!');
  }
}

在这个例子中：

AuthService 用于管理用户的登录状态，它提供了一个 isLoggedIn 的 Observable，可以让组件订阅用户的登录状态。
LoginComponent 组件使用 AuthService 的 isLoggedIn Observable 来显示用户的登录状态，并提供了登录和注销的按钮。
当用户点击登录或注销按钮时，组件会调用 AuthService 的 login 或 logout 方法来更新用户的登录状态，并使用 NzMessageService 显示一条消息。
我们使用了 async 管道来订阅 isLoggedIn Observable，这样 Angular 可以自动管理订阅，避免了内存泄漏。

BehaviorSubject 是 RxJS 中的一个重要概念，是一种特殊类型的 Subject。Subject 在 RxJS 中被看作是一种既是 Observable（可观察对象）又是 Observer（观察者）的对象。也就是说，你既可以向它发送（emit）数据，也可以从它那里订阅（subscribe）数据。

BehaviorSubject 与普通的 Subject 的主要区别在于，它会记住最后一次发送的值。当有新的 Observer 订阅它时，这个新的 Observer 会立即接收到最后一次发送的值。这在很多情况下都是非常有用的，例如，在这个例子中，我们希望新的订阅者能够立即知道用户当前的登录状态。

这段代码 private loggedIn = new BehaviorSubject(false); 定义了一个 BehaviorSubject 实例，并设置了初始值为 false，代表用户未登录。这个 BehaviorSubject 可以用来发送新的登录状态，也可以被订阅以接收新的登录状态。

然后，我们定义了一个 getter 方法 isLoggedIn()，它返回 loggedIn 的 Observable 版本。这个方法通过调用 loggedIn.asObservable() 实现，asObservable() 方法会返回一个新的 Observable，这个 Observable 会镜像 loggedIn 的所有值，但无法通过它来发送新的值。这样一来，我们可以保护 loggedIn，防止在 AuthService 服务外部不小心发送了新的值。

所以，AuthService 服务中的 isLoggedIn 方法的主要目的是为了提供一种安全的方式让外部代码可以订阅用户的登录状态，而不用担心会不小心改变登录状态。

三、表单处理

假设我们有一个用户注册的表单，我们需要在用户输入用户名后立即检查用户名是否已被注册。

首先，我们需要在 Angular 模块中导入 ReactiveFormsModule 和 NgZorroAntdModule：

代码如下（示例）：

import { ReactiveFormsModule } from '@angular/forms';
import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
  imports: [
    ReactiveFormsModule,
    NgZorroAntdModule,
    // ...
  ],
  // ...
})
export class AppModule { }

然后，我们可以创建一个服务来模拟 API 调用：

import { Injectable } from '@angular/core';
import { of, Observable } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  checkUsername(username: string): Observable<boolean> {
    const isTaken = (username === 'user1');
    return of(isTaken).pipe(delay(500));
  }
}

接着，我们可以在组件中创建表单，并监听 username 字段的 valueChanges Observable：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { debounceTime, switchMap } from 'rxjs/operators';
import { UserService } from './user.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  form: FormGroup;
  usernameTaken = false;

  constructor(private fb: FormBuilder, private userService: UserService) { }

  ngOnInit() {
    this.form = this.fb.group({
      username: '',
      password: '',
    });

    this.form.get('username').valueChanges.pipe(
      debounceTime(500),
      switchMap(username => this.userService.checkUsername(username))
    ).subscribe(isTaken => {
      this.usernameTaken = isTaken;
    });
  }
}

最后，我们可以在模板中使用 NG-ZORRO 的表单控件和 nz-typography 组件来显示验证结果：

<form [formGroup]="form" nz-form>
  <nz-form-item>
    <nz-form-label nzRequired>Username</nz-form-label>
    <nz-form-control>
      <input nz-input formControlName="username" />
      <nz-typography *ngIf="usernameTaken" nzType="danger">Username is already taken</nz-typography>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzRequired>Password</nz-form-label>
    <nz-form-control>
      <input nz-input formControlName="password" type="password" />
    </nz-form-control>
  </nz-form-item>
</form>

在这个例子中，我们使用了以下 RxJS 的特性：

debounceTime(500)：我们在发起 API 请求前等待用户停止输入 500 毫秒，以此避免过多的 API 请求。
switchMap：我们在每次用户输入后都发起一个新的 API 请求，并取消上一个未完成的 API 请求。这样，我们总是获取到最新输入的用户名的验证结果。