Angular 18中HttpClient请求拦截失效问题求助

问题原因 #

Angular 18起，HttpClient默认采用Fetch API作为底层实现，而非传统的XMLHttpRequest(XHR)。你之前使用的takeUntil+取消订阅的方式，仅会终止Observable的响应处理，但无法中断底层的Fetch请求——Fetch请求的取消必须通过AbortController的signal来触发，因此Chrome控制台仍会显示请求完成。

解决方案 #

方案1：使用AbortController（推荐，符合Angular 18新特性） #

结合HttpClient的signal配置项，用AbortController来取消请求，这是Angular官方推荐的方式，同时兼容Observable用法：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<button (click)="callApi()">调用API并2秒后取消</button>`,
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  callApi() {
    // 创建AbortController实例
    const abortController = new AbortController();
    
    this.http.get(`https://httpstat.us/200?sleep=${8 * 1000}`, {
      signal: abortController.signal // 将signal传入请求配置
    }).subscribe({
      next: (result) => console.warn('请求完成'),
      error: (err) => {
        if (err.name === 'AbortError') {
          console.log('请求已被取消');
        } else {
          console.error('请求失败', err);
        }
      }
    });

    // 2秒后触发取消
    setTimeout(() => {
      abortController.abort();
    }, 2000);
  }
}

方案2：回退到XHR实现（兼容旧代码） #

如果需要保留原有的取消订阅逻辑，可以在应用配置中禁用Fetch，强制HttpClient使用XHR：

在app.config.ts中修改配置：

import { ApplicationConfig, provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    // 禁用Fetch，使用XHR
    provideHttpClient(withFetch(false))
  ]
};

配置后，你原来的takeUntil+取消订阅代码就能正常终止请求了。但此方式仅作为兼容方案，不推荐长期使用，因为Fetch是Web平台的未来标准。

关键说明 #

• 旧版本Angular中HttpClient基于XHR，取消Observable订阅会直接终止XHR请求；
• Angular 18切换到Fetch后，必须通过AbortSignal才能中断底层请求，单纯取消订阅只会停止响应处理。

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