RxJS 深入理解及应用-JavaScript中文网-JavaScript教程资源分享门户

RxJS 是 Reactive Extensions for JavaScript 的简称，是一个强大的响应式编程库。相比于传统的命令式编程，响应式编程可以让我们更简单、更高效地处理数据流。在本文中，我们将深入理解 RxJS 的基本概念和运用方法，并带你通过实例了解 RxJS 在前端开发中的应用。

响应式编程的基本概念

Observable

Observable（可观察对象）是 RxJS 中最基本的概念之一，表示一个可被观察的数据源，可以发出（emit）一系列的事件，比如一个点击事件，一个 HTTP 请求等等。我们可以使用 RxJS 提供的一系列操作符来操作这些事件，如过滤、映射、合并等等。

Observable 可以产生三种类型的事件：

Next：表示数据流发生了一次变化，并将这个新的的值发送给订阅者。
Error：表示 observable 抛出一个错误，后续的事件流将不再执行。
Complete：表示事件流已结束。

Observer

Observer（观察者）是一个回调函数集合，它知道如何处理 Observable 发出的事件。在 RxJS 中，Observer 由三个回调组成：next、error 和 complete 分别对应 Observable 发出的三种类型事件。在订阅 Observable 的时候，我们需要将 Observer 传递给 Observable，以便 Observable 能够通知 Observer 发生了什么。

Subscription

Subscription 表示 Observable 和 Observer 之间的关系。在订阅 Observable 的时候，Observable 会返回一个 Subscription 对象，这个对象表示 Observer 和 Observable 的关系。我们可以使用 Subscription 对象来取消订阅 Observable，并且可以使用它来获取当前订阅的 Observable 的状态。

Operator

Operator 用来操作 Observable 发出的事件流，返回一个新的 Observable。RxJS 提供了大量的操作符，如 map、scan、filter 等等。将多个操作符连续使用，就可以实现更加复杂的数据流操作。

基础示例

让我们看一下如何使用 RxJS 来简化一些基本的使用场景。假如我们需要完成以下需求：

读取一个文件，并在读取成功的时候将文件数据发送到一个接口。
在文件读取失败的时候，我们需要向一个错误处理函数中发送一个错误对象。

使用 RxJS，我们可以这样实现：

// www.javascriptcn.com code example
import { from } from 'rxjs';
import { mergeMap, catchError } from 'rxjs/operators';

const readFile$ = from(fetch('./data.txt'));

readFile$.pipe(
  mergeMap(response => response.text()),
  mergeMap(text => fetch('/api/upload', { method: 'POST', body: text })),
  catchError(err => {
    console.error(err);
    return [];
  })
).subscribe();

在这个示例中，我们使用 from 方法来创建一个 Observable，将 FETCH 请求实例化为 Observable，同时使用 mergeMap 方法转换 Observable，来处理 Observable 发出的事件。catchError 方法处理错误信息，并且将其输出到控制台上。

常用操作符

RxJS 操作符丰富多样，可以根据需求组合使用。下面是一些常用的 RxJS 操作符：

map

map 操作符可以将 Observable 发出的每个值变换为新的值。

from([1, 2, 3, 4]).pipe(map(x => x * 2)).subscribe(console.log);
// Output: 2, 4, 6, 8

filter

filter 操作符可以根据条件过滤 Observable 发出的值。

from([1, 2, 3, 4]).pipe(filter(x => x % 2 === 0)).subscribe(console.log);
// Output: 2, 4

mergeMap

mergeMap 操作符可以将 Observable 转换为新的 Observable。

from([1, 2, 3, 4]).pipe(mergeMap(x => from([x, x * 2]))).subscribe(console.log);
// Output: 1, 2, 2, 4, 3, 6, 4, 8

reduce

reduce 操作符可以将序列中的每个值逐步累加。

from([1, 2, 3, 4]).pipe(reduce((a, b) => a + b, 0)).subscribe(console.log);
// Output: 10

实战场景

RxJS 在实际应用中可以大大简化代码逻辑。下面我们来看一组实战案例。

实现一个搜索框自动完成功能

在用户输入时，我们需要发起一个 HTTP 请求从服务器查询相关信息，然后将查询的结果显示在下拉列表中。

// www.javascriptcn.com code example
import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { debounceTime, map, switchMap } from 'rxjs/operators';

const input = document.getElementById('search-input');
const result = document.getElementById('search-result');

fromEvent(input, 'input')
  .pipe(
    debounceTime(500),
    map((event: any) => event.target.value.trim()),
    switchMap(keyword => ajax.getJSON(`/search?keyword=${keyword}`))
  )
  .subscribe((data: any) => {
    const html = data.map((item: any) => `<li>${item.title}</li>`).join('');
    result.innerHTML = `<ul>${html}</ul>`;
  });

在这个示例中，我们将输入框的输入事件转换为一个 Observable，并使用 debounceTime 操作符进行去抖处理。然后使用 switchMap 操作符将 Observable 转换到一个新的 Observable，实现 HTTP 请求的操作。

实现一个简单的 Vuex Store

在 Vue 框架中，我们可以使用 Vuex 状态管理来统一管理组件间的状态。下面是一个简单的 Vuex Store 实现，使用 RxJS 简化状态管理。

// www.javascriptcn.com code example
import { Subject } from 'rxjs';
import { scan } from 'rxjs/operators';

const store = new Subject();
const initialState = { count: 0 };

store.pipe(scan((state: any, event: any) => {
  switch (event.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}, initialState)).subscribe(console.log);

store.next({ type: 'INCREMENT' });
store.next({ type: 'INCREMENT' });
store.next({ type: 'DECREMENT' });
store.next({ type: 'INVALID' });

在这个示例中，我们使用 RxJS 中的 Subject 创建了一个 Store，使用 scan 操作符实现状态变更的操作。然后使用 store.next() 发出状态更改的命令，比如向 Store 中添加一条记录，或者从 Store 中删除一条记录。

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

RxJS 深入理解及应用