Angular RxJS 6-角度6-如果触发新的http请求，则正确取消当前http请求

所以我知道这是完全可能的，但除了简单的http get和订阅之外，我从未使用过RxJs。我有一个监听WebSocket事件的服务，当一个这样的事件触发时，我调用Api来加载一些数据。如果websocket事件在1个api已经传输时触发，我想取消它，然后重新启动一个新的api调用。我不确定我是否正确使用了SwitchMap，我不知道如何将管道与RxJs 6结合使用

这是否正确使用SwitchMap和管道来获取数据？在触发大量事件时，它似乎工作正常，但在触发最后一个事件后，它似乎有很长的延迟，但这可能是服务器延迟，因为我的api服务器也是我的websocket服务器

我的组成部分：

clients: Client[] = [];

  constructor(public statsApi: StatisticsService)
  {
    this.statsApi.OnClientUpdate.pipe(switchMap(x => { return this.statsApi.GetClients() })).subscribe(x =>
    {
      console.log(x);
      this.LoadClients(x);
    });
  }

  private LoadClients(clients:Client[] = null): void
  { 
    if (clients != null)
    { 
      this.clients = clients;
    } else
    { 
      this.statsApi.GetClients().subscribe(data =>
      {
        this.clients = data;
      });
    }
  }

  ngOnInit() 
  {
    this.LoadClients();
  }

GetClient内部服务：

public GetClients(): Observable<Client[]>
  { 
    return this.http.get<Client[]>('http://localhost:5000/api/client');
  }

public GetClients（）：可观察
{ 
返回此.http.get（'http://localhost:5000/api/client');
}

---

OnClientUpdate返回一个可观察的

您的代码描述了每次您的

OnClientUpdate

可观察的产生时发送http请求的过程。每个成品最终选择一个表示http请求的可观察对象

switchMap

将订阅可观察到的http请求，并将其订阅处理为任何先前可观察到的http请求。如果observable的订阅正确地实现了http请求的处理，

switchMap

将按预期工作

但是，根据

OnClientUpdate

生成的频率，您可能需要添加

debounce

操作，从而防止快速触发http请求和取消

示例-

不要发送垃圾邮件，取消除最新请求以外的所有请求，并生成每个最新结果

：

var latestHttpRequestResult =
    trigger
        .pipe(debounce(200))
        .pipe(switchMap(sendHttpRequestAsObservable));

---

我现在添加了一个去BounceTime，它使屏幕负载更加平滑。在典型的用例中，客户端更新不应该经常触发。然而，出于测试目的，我打开了20多个选项卡，触发20个客户端更新事件，然后一次刷新它们，以查看该组件如何处理它。