Angular Observables 返回匿名函数答案

【问题标题】：Angular Observables return anonymous functionAngular Observables 返回匿名函数
【发布时间】：2020-01-08 22:40:35
【问题描述】：

我有这个从 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);
        }
      });
    }));
  }

【问题讨论】：

标签： javascript angular typescript websocket observable

【解决方案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');
  };
});

当然，您可以使用arrow function expression 拥有：

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

如果有帮助，请告诉我！

【讨论】：