javascript - 如果已经使用相同的请求运行，则取消订阅/取消 Angular 4 中的现有 HTTP/XHR 调用

Question

问题陈述:目前我有一个前端应用程序，它在一个页面中有 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;
});

版本

• Angular :4.0.1
• rxjs: 5.0.3

Answer 1

好吧，忘掉 switchMap，那在这里没用。

来自聊天:

I understood the problem Is mainly because since I have different child components which parallelly making a call this method and I have same Subscription for all the Graphs hence any time new request comes its unsubscribing the requests.. Is there any way to resolve this one out

我看到您正在为每个 http 请求调用相同的方法。我的猜测是，每当其中一个 child 发出下拉 valueChange event 时，您就会在 parent component 中执行此操作。

编辑:

从聊天中可以清楚地看出，OP 实际上是指继承 而非 Angular 上下文中的父子 组件。

即 Child1, Child2... 类是从 Parent 扩展而来的

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

只有当同一个组件说 Child1 触发第二个 http 请求时，它自己之前的 subscription 才会被杀死，更新的 subscription 在 child1 实例上创建。

查看此 demo检查 instances 是否在 child 组件之间共享。他们都是独立的。