Angular 2 - 在路由更改中取消HTTP请求

我正在用Angular2构建一个网站，其中包含多个包含具有各种统计信息的仪表板的页面。Angular 2 - 在路由更改中取消HTTP请求

在单个页面上，分别制作了6个不同的请求（每个仪表板图块一个），这可能需要5秒钟才能结束。当仪表板的请求正在进行时，当我更改页面时，会出现问题。

在这种情况下，请求将开始叠加，如果多次更改页面，仪表板将花费更多时间加载。每个请求都作出如下方式：

return this.http.post("http://mywebsite.com/dashboard/info", body, options) 
    .map((res) => { 
     return res.json() 
    }).subscribe((result) => { /* do something */});

我所寻找的是一种方式来中止所有当我改变网页的当前请求，以避免它们叠加起来，导致过多的加载时间。

来源

2017-07-14 Manuel Reis

https://stackoverflow.com/questions/36490926/how-to-cancel-a-httprequest-in-angular-2 – onetwo12

在'ngOnDestroy'生命周期挂钩'从你的HTTP调用unsubscribe'。 – echonax

当您致电subscribe时，Subscription对象被创建并且它一直存在，直到observable完成。

如果您不再需要结果，您必须从发布请求中获得unsubscribe。最常见的方法是从ngOnDestroy组件中调用unsubscribe。

/** 
* Disposes the resources held by the subscription. May, for instance, cancel 
* an ongoing Observable execution or cancel any other type of work that 
* started when the Subscription was created. 
* @return {void} 
*/ 
unsubscribe(): void;

编辑：

注意，就是你所谓share()，take()，first()或创建一个比退订不会取消HTTP请求一个新的观察到的任何其他操作。因为您只会取消订阅儿童可见度。

来源

2017-07-14 13:34:41 cgTag

只是为了确认，调用上述任何方法都会创建一个新的observable，其中取消订阅不会取消HTTP请求，这是否正确？ –

@ManuelReis对你有帮助吗？因为我理解你的问题的方式，你似乎实际上并没有破坏组件（ngOnDestroy不会被调用）。 – AArias

@AArias我也认为（和ngOnDestroy没有被导入我的组件），但显然在更改页面ngOnDestroy被调用。我现在正在验证这种方法是否有效 –

您想要取消订阅您的可观察订阅。订阅在订阅observable（本例中为this.http.post（））时返回。然后，在页面的OnDestroy方法中，您可以取消订阅，取消正在进行的http请求。

// subscription 
this.subscription = this.http.post("http://mywebsite.com/dashboard/info", body, options) 
    .map((res) => { 
     return res.json() 
    }).subscribe((result) => { /* do something */}); 

// within the ngOnDestroy of your component 
onDestroy(){ 
    this.subscription.unsubscribe(); 
}

来源

2017-07-14 13:34:52 LLai

Angular 2 - 在路由更改中取消HTTP请求

回答

相关问题