迹忆客 专注技术分享

我们将了解订阅功能的用途及其在 JavaScript 或 jQuery 中的用法。我们将通过不同的示例了解如何在 JavaScript 代码语句中使用 subscribe() 方法创建和执行订阅。

在 JavaScript 中使用 .subscribe() 方法

.subscribe() 方法类似于 jQuery 的 Promise .then()、.catch() 和 .finally() 方法，但它处理的是 Observables 的 Promise。

如果我们希望在失败情况下（如 .catch()）或成功情况下（如 .finally()）执行和运行一些逻辑，我们可以将该逻辑传递给订阅，如下所示：

myObservable.subscribe(
    value => toDoOnlyOnSuccess(value), error => toDoOnlyOnError(error),
    () => toDoAnyCase());

为了表示一个可支配的资源，我们使用订阅，它是一个对象。它是一个 observable 的执行。

一个基本的 subscribe 方法是 unsubscribe()，它不带参数并丢弃被订阅保留的资源。在 RxJs 的早期版本中，订阅被称为 Disposable，这是一种 JavaScript 的响应式扩展。

import {interval} from 'rxjs';

const myObservable = interval(1000);
const mySubscription = myObservable.subscribe(x => console.log(x));

// ongoing Observable execution is canceled
// which was started by calling subscribe with an Observer.
mySubscription.unsubscribe();

在 JavaScript 中使用 unsubscribe() 方法

我们在 Subscription 中有 unsubscribe() 函数来释放资源或取消正在进行的 observable 执行。我们还可以将订阅放在一起，为多个订阅调用 unsubscribe() 方法。

我们可以通过将一个订阅添加到另一个订阅中来实现这一点，如下所示：

import {interval} from 'rxjs';

const observableA = interval(500);
const observableB = interval(400);

const subscriptionMain =
    observableA.subscribe(x => console.log('first subscription: ' + x));
const SubscriptionChild =
    observableB.subscribe(x => console.log('second subscription: ' + x));

mySubscription.add(SubscriptionChild);

setTimeout(() => {
  // Unsubscribes subscriptionMain and SubscriptionChild together
  mySubscription.unsubscribe();
}, 1000);

输出：

second subscription: 0
first subscription: 0
second subscription: 1
first subscription: 1
second subscription: 2

jQuery 中的 subscribe() 插件

一个用作事件聚合器的 jQuery 插件 subscribe()，事件名称可以定义为 .subscribe("HelloWorld",function(){})。它使开发人员能够在 JavaScript/jQuery 中编写低耦合的代码。

我们需要为事件名称指定事件句柄，如下所示：

`.subscribe("HelloWorld", function(data) {alert("Hello World!");});`

subscribe() 方法使用事件处理程序订阅特定的事件名称，当主题被订阅时，处理程序将被执行。