RxJS 6 - Angular 6 - 如果触发了新的 http 请求，则正确取消当前的 http 请求 [英] RxJS 6 - Angular 6 - Properly canceling current http request if a new one is triggered

问题描述

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

So I know this is totally possible but I have never used RxJs any more than simple http get and subscribes. I have a service that is listening for WebSocket events, when 1 such event triggers, I make a call to an Api to load some data. If that websocket event triggers while 1 api is already in transit I want to cancel it and then restart a new api call. I am not sure if I am correctly using SwitchMap and I am lost of how to use Pipe with RxJs 6.

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

Is this the proper usage of SwitchMap and pipe to get my data? It seems to be working right when triggering a large amount of events, but seems to have a long delay after the last event has triggered however that may be server lag because my api server is also my websocket server.

我的组件:

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:

GetClients inside of Service:

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

OnClientUpdate 返回一个 Observable

推荐答案

您的代码描述了每次 OnClientUpdate observable 产生时发送 http 请求的过程.每个 yield 最终选择一个代表 http 请求的 observable.switchMap 将订阅该 http 请求 observable 并处理它对任何先前的 http 请求 observable 的订阅.如果该 observable 的订阅正确实现了 http 请求的处理，switchMap 将按预期工作.

Your code is describing the process of sending an http request each time your OnClientUpdate observable yields. Each yield ends up selecting an observable which represents an http request. switchMap will subscribe to that http request observable and dispose of it's subscription to any prior http request observable. If that observable's subscription properly implements the disposal of the http request, switchMap will work as intended.

然而，根据OnClientUpdate 可以产生的频率，您可能需要添加一个debounce操作，从而防止快速触发http请求和取消.

However, depending on how often OnClientUpdate can yield, you may want to add a debounce operation, thus preventing rapid-fire http request and cancellations.

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

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

这篇关于RxJS 6 - Angular 6 - 如果触发了新的 http 请求，则正确取消当前的 http 请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！