Rxjs 基础概念以及其简单用法和优势介绍

2024-02-19 00:10:41

简介

RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。Observable 是一种可以发出值或错误的特殊对象，而 Observer 是一种可以接收这些值或错误的对象。Subscription 是连接 Observable 和 Observer 的桥梁，它允许 Observer 接收 Observable 发出的值或错误。

RxJS 的基本概念

Observable

Observable 是一个可以发出值或错误的特殊对象。它类似于一个管道，值或错误可以从管道的一端流入，然后从另一端流出。Observable 可以通过多种方式创建，例如，通过调用一个函数、通过一个事件、通过一个定时器等。

Observer

Observer 是一个可以接收 Observable 发出的值或错误的对象。它由三个方法组成：next()、error() 和 complete()。当 Observable 发出一个值时，会调用 next() 方法；当 Observable 发出一个错误时，会调用 error() 方法；当 Observable 完成时，会调用 complete() 方法。

Subscription

Subscription 是连接 Observable 和 Observer 的桥梁。它允许 Observer 接收 Observable 发出的值或错误。Subscription 可以通过调用 Observable 的 subscribe() 方法来创建。

Scheduler

Scheduler 是一个用来控制 Observable 发出值或错误的频率的对象。它可以用来延迟值或错误的发出，也可以用来在多个 Observable 之间同步值或错误的发出。

Operator

Operator 是一个用来对 Observable 进行转换的对象。它可以用来过滤值或错误、映射值或错误、合并多个 Observable 等。Operator 可以通过调用 Observable 的 pipe() 方法来使用。

Pipeable operator

Pipeable operator 是一个特殊的 Operator，它可以被管道到另一个 Operator。这意味着 Pipeable operator 可以被组合起来使用，从而创建更复杂的操作。

RxJS 的简单用法

以下是一个使用 RxJS 处理事件流的简单示例：

const observable = Rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});

const observer = {
  next: function (value) {
    console.log(value);
  },
  error: function (error) {
    console.log(error);
  },
  complete: function () {
    console.log('Completed');
  }
};

const subscription = observable.subscribe(observer);

subscription.unsubscribe();

在这个示例中，我们首先创建了一个 Observable，然后创建了一个 Observer。然后，我们使用 Observable 的 subscribe() 方法将 Observer 订阅到 Observable。当 Observable 发出一个值时，会调用 Observer 的 next() 方法；当 Observable 发出一个错误时，会调用 Observer 的 error() 方法；当 Observable 完成时，会调用 Observer 的 complete() 方法。最后，我们使用 unsubscribe() 方法取消订阅。