Angular 5.2.9中优雅处理HTTP响应的中间件实现方案问询

针对你遇到的重复处理HTTP响应的繁琐问题，我有两个非常实用的解决方案，刚好能适配你的场景，给你详细拆解下：

这是Angular原生提供的统一处理HTTP请求/响应的方案，能让你把重复的响应逻辑集中在一个地方，所有通过HttpClient发起的请求都会自动被拦截处理，完全不用修改组件里的代码。

步骤1：创建响应拦截器 #

新建一个拦截器类，实现HttpInterceptor接口，在intercept方法里处理响应的302跳转逻辑：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Router } from '@angular/router';

@Injectable()
export class ResponseInterceptor implements HttpInterceptor {

  constructor(private router: Router) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      tap(event => {
        // 只处理成功的响应
        if (event instanceof HttpResponse) {
          const response = event.body as { status_code?: number, data?: { redirectUrl?: string } };
          // 判断是否是302状态码，并且存在跳转地址
          if (response.status_code === 302 && response.data?.redirectUrl) {
            this.router.navigate([response.data.redirectUrl]);
          }
        }
      })
    );
  }
}

步骤2：注册拦截器 #

在你的根模块（比如AppModule）的providers数组中注册这个拦截器，让Angular识别它：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ResponseInterceptor } from './response.interceptor';

@NgModule({
  // ...其他模块配置（declarations、imports等）
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ResponseInterceptor,
      multi: true // 允许多个拦截器同时生效
    }
  ]
})
export class AppModule { }

这样配置完成后，所有通过HttpClient发起的请求都会自动触发这个拦截逻辑，你组件里原来的代码可以简化成：

this.http.get<any>('/api/ping/').subscribe((response) => {
  // 只处理正常业务逻辑，302跳转已经被拦截器自动处理了
});

如果因为某些原因你不想用拦截器，或者想更灵活地控制哪些请求走统一逻辑，可以自己封装一层HttpClient，完全替代Proxy的需求，而且TypeScript 2.5.3完全支持这种方式。

步骤1：创建自定义HttpClient服务 #

新建一个服务类，注入原生的HttpClient和Router，封装常用的HTTP方法（get、post等），在方法里统一处理302跳转：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root' // 全局注册服务
})
export class CustomHttpClient {

  constructor(private http: HttpClient, private router: Router) { }

  // 封装get方法
  get<T>(url: string, options?: any): Observable<T> {
    return this.http.get<T>(url, options).pipe(
      tap((response: any) => {
        this.handleRedirect(response);
      })
    );
  }

  // 封装post方法
  post<T>(url: string, body: any, options?: any): Observable<T> {
    return this.http.post<T>(url, body, options).pipe(
      tap((response: any) => {
        this.handleRedirect(response);
      })
    );
  }

  // 统一的跳转处理逻辑，方便维护
  private handleRedirect(response: any): void {
    if (response.status_code === 302 && response.data?.redirectUrl) {
      this.router.navigate([response.data.redirectUrl]);
    }
  }

  // 按需封装put、delete等其他HTTP方法
}

步骤2：在组件中使用自定义服务 #

把组件里原来的HttpClient替换成CustomHttpClient，调用方法和原来完全一致，但不用再写重复的跳转逻辑：

import { CustomHttpClient } from './custom-http-client.service';

// 组件构造函数注入自定义服务
constructor(private http: CustomHttpClient) {}

someMethod() {
  this.http.get<any>('/api/ping/').subscribe((response) => {
    // 只处理你的业务逻辑，跳转逻辑已经在CustomHttpClient里统一处理了
  });
}

两种方案都能完美解决你的问题，个人更推荐第一种拦截器方案，因为它是Angular的标准实践，逻辑集中且侵入性低；如果需要更细粒度的控制，第二种封装服务的方式也非常灵活。

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