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

如果这有帮助，请告诉我！