Angular Observables 返回匿名函数

Posted 2023-02-16

【中文标题】Angular Observables 返回匿名函数

【英文标题】：Angular Observables return anonymous function

【发布时间】：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);
        
      );
    ));
  

【参考方案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

如果有帮助，请告诉我！