Angular 6 中使用的 RxJS 详解

前言

RxJS 是一个专为 JavaScript 编写的响应式编程库，它基于观察者模式实现，可以帮助我们更方便地管理和处理异步事件流。在 Angular 中，RxJS 是一个非常重要的库，它被用于处理 HTTP 请求、响应式表单、路由等等。本文将详细介绍 Angular 6 中使用的 RxJS，包括操作符、Subject、Observable 等等，希望能够对大家有所帮助。

RxJS 操作符

RxJS 中有很多操作符，它们可以用于处理流中的数据，例如过滤、变换、合并等等。下面是一些常用的操作符：

map

map 操作符可以用于将流中的每个元素进行映射，返回一个新的流。例如，我们可以将每个数字平方：

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

of(1, 2, 3).pipe(
  map(x => x * x)
).subscribe(console.log); // 输出 1, 4, 9

filter

filter 操作符可以用于过滤流中的元素，只保留符合条件的元素。例如，我们可以只保留偶数：

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

of(1, 2, 3, 4, 5, 6).pipe(
  filter(x => x % 2 === 0)
).subscribe(console.log); // 输出 2, 4, 6

take

take 操作符可以用于从流中取出指定数量的元素，然后自动完成 Observable。例如，我们可以只取前三个元素：

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

of(1, 2, 3, 4, 5, 6).pipe(
  take(3)
).subscribe(console.log); // 输出 1, 2, 3

merge

merge 操作符可以用于将多个流合并成一个流。例如，我们可以将两个流合并：

import { of, interval } from 'rxjs';
import { merge } from 'rxjs/operators';

const obs1 = of('a', 'b', 'c');
const obs2 = interval(1000);

merge(obs1, obs2).subscribe(console.log); // 输出 a, b, c, 0, 1, 2, ...

catchError

catchError 操作符可以用于捕获 Observable 中的错误，并返回一个新的 Observable。例如，我们可以在发生错误时返回一个默认值：

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

of(1, 2, 3).pipe(
  map(x => x.toUpperCase()),
  catchError(() => of('default'))
).subscribe(console.log); // 输出 1, 2, default

Subject

Subject 是 RxJS 中的一个类，它可以同时充当 Observable 和 Observer 的角色，可以用于将多个观察者连接起来，实现多播。例如，我们可以创建一个 Subject，并将多个观察者订阅它：

// javascriptcn.com 代码示例
import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe({
  next: x => console.log(`observerA: ${x}`)
});
subject.subscribe({
  next: x => console.log(`observerB: ${x}`)
});

subject.next(1);
subject.next(2);

// 输出
// observerA: 1
// observerB: 1
// observerA: 2
// observerB: 2

Observable

Observable 是 RxJS 中最重要的类，它用于表示一个流，可以用于处理异步事件。例如，我们可以创建一个 Observable，然后订阅它：

// javascriptcn.com 代码示例
import { Observable } from 'rxjs';

const observable = new Observable(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  setTimeout(() => {
    observer.next(4);
    observer.complete();
  }, 1000);
});

console.log('just before subscribe');
observable.subscribe({
  next: x => console.log(`got value ${x}`),
  error: err => console.error(`something wrong occurred: ${err}`),
  complete: () => console.log('done')
});
console.log('just after subscribe');

// 输出
// just before subscribe
// got value 1
// got value 2
// got value 3
// just after subscribe
// got value 4
// done

总结

在本文中，我们介绍了 Angular 6 中使用的 RxJS，包括操作符、Subject、Observable 等等。RxJS 是一个非常强大的库，可以帮助我们更方便地管理和处理异步事件流，希望本文对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657816c3d2f5e1655d1f079a