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