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

Question

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

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

在这种情况下，请求将开始堆积，如果我多次更改页面，仪表板将需要越来越多的时间来加载。每个请求均按以下方式发出:

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

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

Answer 1

当您调用 subscribe 时，会创建一个 Subscription 对象，并且该对象会一直存在，直到可观察对象完成为止。

当您不再需要结果时，您必须取消订阅发布请求。最常见的方法是从组件的 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 请求。因为您将仅取消订阅子可观察对象。