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()
方法使用事件處理程式訂閱特定的事件名稱,當主題被訂閱時,處理程式將被執行。