Angular 2 - 在路由更改时中止 HTTP 请求答案

【问题标题】：Angular 2 - Abort HTTP requests on route changeAngular 2 - 在路由更改时中止 HTTP 请求
【发布时间】：2017-12-19 15:12:38
【问题描述】：

我正在使用 Angular2 构建一个网站，该网站由多个页面组成，其中包含一个带有各种统计信息的仪表板。

在一个页面上，分别发出 6 个不同的请求（每个仪表板磁贴一个），最多可能需要 5 秒才能结束。当我在对仪表板的请求正在进行时更改页面时会出现问题。

在这种情况下，请求将开始堆积，如果我多次更改页面，仪表板将花费越来越多的时间来加载。每个请求都通过以下方式发出：

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

我正在寻找一种在我更改页面时中止所有正在进行的请求的方法，以避免它们堆积并导致加载时间过长。

【问题讨论】：

stackoverflow.com/questions/36490926/…
在您的 http 调用中打开 ngOnDestroy 生命周期挂钩 unsubscribe。

标签： angular

【解决方案1】：

当您调用 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 请求。因为您将取消订阅仅可观察的孩子。

【讨论】：

只是为了确保，调用上述任何方法都会创建一个新的 observable，取消订阅不会取消 HTTP 请求，对吗？
@ManuelReis 这对你有帮助吗？因为我理解你的问题的方式，你似乎实际上并没有破坏组件（不会调用 ngOnDestroy）。
@AArias 我也这么认为（我的组件上没有导入 ngOnDestroy），但显然在更改页面时调用了 ngOnDestroy。我现在正在验证这种方法是否有效
只要组件实际上没有从 DOM 中消失，就不会调用 ngOnDestroy。让我知道是否可以提供实际的解决方案。
页面没有刷新，但是组件被另一个组件替换了（例如dashboard1 -> dashboard2），所以调用了ngOnDestroy。这解决了我的问题

【解决方案2】：

您想取消订阅您的 observable 订阅。当您订阅一个 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();
}

【讨论】：