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