Question

所以我知道这是完全有可能的，但是除了简单的http get和subscription之外，我从未使用过RxJs。我有一个正在监听WebSocket事件的服务，当1个此类事件触发时，我会调用Api来加载一些数据。如果该websocket事件在1个api已经在传输中时触发，我想取消它，然后重新启动一个新的api调用。我不确定我是否正确使用SwitchMap，并且不知道如何将Pipe与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();
  }

服务内的GetClients：

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

OnClientUpdate returns an Observable<number>

Answer 1

您的代码描述了每次OnClientUpdate观察到的收益时发送http请求的过程。每个收益最终都会选择一个表示http请求的可观察对象。 switchMap将订阅可观察到的http请求，并将其订阅给任何先前可观察到的http请求。如果该可观察对象的订阅正确实现了http请求的处置，则switchMap将按预期工作。

但是，根据OnClientUpdate 产生的频率，您可能需要添加debounce操作，从而防止快速启动http请求和取消操作。

示例-don't spam, cancel all but the latest request, and yield each latest result：

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

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

1 个答案: