Angular 5中切换组件时如何取消HTTP请求？

在Angular里处理组件切换时终止未完成的HTTP请求，核心思路是利用RxJS的订阅管理机制——因为HttpClient返回的所有请求都是Observable对象，只要在组件销毁时取消这些Observable的订阅，浏览器就会自动终止对应的HTTP请求。下面给你两种常用的实现方式：

方法一：用takeUntil统一管理多个请求（推荐） #

这种方式适合组件内有多个HTTP请求的场景，只需要一个Subject就能统一处理所有订阅的取消，代码更简洁易维护。

1. 在组件中定义一个Subject作为销毁信号：

import { Component, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs/Subject';
// 根据你的RxJS版本选择导入方式：
// RxJS 5.5+（Angular 5.5及以上）用pipeable操作符
import { takeUntil } from 'rxjs/operators';
// RxJS 5.0-5.4 用链式操作符
// import 'rxjs/add/operator/takeUntil';

@Component({
  selector: 'app-list-users',
  templateUrl: './list-users.component.html'
})
export class ListUsersComponent implements OnDestroy {
  // 定义销毁信号Subject
  private destroyed$ = new Subject<void>();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // 发起用户列表请求，通过takeUntil绑定销毁信号
    this.http.get('/api/users')
      // RxJS 5.5+ 用pipe包裹操作符
      .pipe(takeUntil(this.destroyed$))
      // RxJS 5.0-5.4 直接链式调用
      // .takeUntil(this.destroyed$)
      .subscribe(users => {
        // 处理用户列表数据
        console.log('用户列表:', users);
      });
  }

  ngOnDestroy() {
    // 发送销毁信号并完成Subject
    this.destroyed$.next();
    this.destroyed$.complete();
  }
}

当组件触发ngOnDestroy钩子时，destroyed$会发出信号，所有通过takeUntil(this.destroyed$)的Observable都会自动取消订阅，对应的HTTP请求也就被终止了。

方法二：手动保存订阅对象并取消 #

如果组件只有单个HTTP请求，也可以直接保存订阅实例，在销毁时手动取消：

import { Component, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-list-users',
  templateUrl: './list-users.component.html'
})
export class ListUsersComponent implements OnDestroy {
  // 保存请求的订阅实例
  private userListSubscription: Subscription;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.userListSubscription = this.http.get('/api/users')
      .subscribe(users => {
        // 处理用户列表数据
        console.log('用户列表:', users);
      });
  }

  ngOnDestroy() {
    // 检查订阅是否存在，然后取消
    if (this.userListSubscription) {
      this.userListSubscription.unsubscribe();
    }
  }
}

这种方式虽然直观，但如果组件内有多个请求，就需要保存多个Subscription对象，维护起来比较麻烦，所以更推荐第一种方法。

额外提醒：使用async管道的情况 #

如果你在模板中使用async管道来订阅Observable（比如{{ userList$ | async }}），Angular会自动在组件销毁时取消订阅，这种情况下不需要手动处理请求终止的问题。

内容的提问来源于stack exchange，提问作者walidtlili