JavaScript subscribe()方法

Muhammad Muzammil Hussain 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 .subscribe() 方法
  2. 在 JavaScript 中使用 unsubscribe() 方法
  3. jQuery 中的 subscribe() 插件
JavaScript subscribe()方法

我们将了解订阅功能的用途及其在 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() 方法使用事件处理程序订阅特定的事件名称,当主题被订阅时,处理程序将被执行。

相关文章 - JavaScript Method