Angular Observables 返回匿名函數

Question

我有這個方法是從 websocket 教程中復制的，但我不明白 observable 中“return () => { ... }”的含義？ 有人可以解釋我這樣做的目的是什么嗎？

  public onMessage(topic: string, handler = SocketClientService.jsonHandler) : Observable<any> {
    return this.connect().pipe(first(), switchMap(client => { 
      return new Observable<any>(observer => {
        const subscription : StompSubscription = client.subscribe(topic, message => {
            observer.next(handler(message));
        });
        return () => {
          console.log("Unsubscribe from socket-client service");
          client.unsubscribe(subscription .id);
        }
      });
    }));
  }

Answer 1

為了創建一個 Observable，你可以使用new Observable或創建操作符。 請參閱以下示例：

const observable = new Observable(function subscribe(subscriber) {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
});

您可以提供一個函數unsubscribe()來允許處理資源，該函數在subscribe()內部如下：

const observable = new Observable(function subscribe(subscriber) {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);

  return function unsubscribe() {
    console.log('Clearing resources on observable');
  };
});

當然，您可以使用箭頭函數表達式來獲得：

const observable = new Observable((observer) => {
  observer.next(1);
  observer.next(2);
  observer.next(3);

  return () => {
    console.log('Clearing resources on observable');
  };
});

嘗試使用以下代碼來測試 Observable：

const subscription = observable.subscribe(res => console.log('observable data:', res));
subscription.unsubscribe();

最后， subscription.unsubscribe()將刪除示例中的套接字連接。

在此處查找使用這些示例運行的項目： https : //stackblitz.com/edit/typescript-observable-unsubscribe

如果這有幫助，請告訴我！