如果已经以相同的请求运行，则取消订阅/取消角度4中的现有HTTP / XHR调用

Posted 2021-04-16

问题陈述：目前我有一个前端应用程序，它有5个图形在一个页面中（每个图表有一个不同的端点来获取数据）要根据从数据库中检索到的数据进行渲染，我有一个下拉列表来更新图表从下拉列表中选择的值。

现在在前端，图表将加载默认值，我的要求是每当用户选择任何下拉列表并且任何HTTP调用（来自默认值）运行时我想取消它们并发出新请求（主要原因因为有时候来自上一个请求的数据所花费的时间比从下拉列表中选择的最新数据要长，因此我的图表仍会使用旧请求进行更新，而不是从下拉菜单中选择的新值，正如我从Chrome网络标签中看到的那样，旧请求完成后最新请求因此使用旧请求进行图形更新）并且所有这些图形对这些方法进行并行请求以呈现数据。

在@Amit Chigadani的帮助下，目前我已经在服务中编写了以下函数，但是使用这种方法，甚至最新请求的端点都被取消，图形根本没有渲染，请你帮我解决这个问题。

在服务中

getData(url: string) {
    const finalRequest = new RequestModel(this.myModel);
    const body = JSON.stringify(finalRequest);
    const headers = new Headers({ "Content-Type": "application/json" });
    const options = new RequestOptions({ headers: headers });

    return this.http.post(url, body, options).switchMap((res) => {
        const resp = res.json();
        return Observable.of(resp);
    });
}

在组件中

public mySub: Subscription;

if (this.mySub !== undefined) {

    this.mySub.unsubscribe();
}

this.mySub = this.myService.getData(this.url).subscribe((data) => {
    try {
    }
    catch (err) {//do something if error
    }
    return this.mySub;
});

版本

• 角度：4.0.1
• rxjs：5.0.3

答案

好的，忘了switchMap，这里没用。

来自聊天：

我理解这个问题主要是因为我有不同的子组件并行调用这个方法，并且我对所有图表都有相同的订阅，因此任何时候新请求都会取消订阅请求..有没有办法解决这个问题

我看到你为每个http请求调用相同的方法。我的猜测是，只要其中一个parent component发出下拉值，就会在你的child中这样做。更改event。

编辑：

从聊天中明确表示，OP实际上是指parent-child组件的inheritance而不是angular上下文。

Child1, Child2...课程从Parent延伸

所以这些Child组件中的每一个现在都有一个单独的mySub Subscription对象实例，可以并行订阅。并且来自其中一个子组件的先前请求的unsubscribing不应该来自其他unsubscribe组件的child实例。

只有当同一个组成部分说Child1发出第二个http请求时，它自己以前的subscription将被杀死并且更新的subscription将在child1实例上创建。

请参阅此demo以检查instances组件中是否共享child。他们都是独立的。