如何将AngularJS自定义HTTP请求方法改写为Angular/TS（HttpClient版）

我来帮你把这段AngularJS代码转换成符合Angular + TypeScript规范的实现，用官方推荐的HttpClient来替代旧的$http。下面是完整的重构方案和代码说明：

要使用HttpClient，首先得在你的Angular模块（比如AppModule）里导入HttpClientModule，不然服务里没法注入HttpClient：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // 其他你的模块导入，比如BrowserModule之类的
    HttpClientModule
  ]
})
export class AppModule { }

把原来的myService改成Angular的可注入服务，注入HttpClient后实现自定义请求逻辑：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root' // 这里用root表示全局可用，也可以指定具体模块
})
export class MyService {
  // 注意：原代码里的www.someURL.com要加上http/https协议，不然会报错
  private baseApiUrl = 'https://www.someURL.com';

  constructor(private http: HttpClient) { }

  // 重构generateRequest，适配HttpClient的请求格式
  private generateRequest(
    method: string,
    url: string,
    headers?: HttpHeaders | { [key: string]: string | string[] },
    body?: any
  ): HttpRequest<any> {
    return new HttpRequest(method, url, body, {
      headers: headers ? headers : new HttpHeaders(),
      // 要是需要额外配置（比如带cookie、响应类型），可以在这里加
    });
  }

  // 版本1：保留原代码的回调逻辑（兼容旧用法）
  customRequest(
    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | string,
    urlPath: string,
    headers?: HttpHeaders | { [key: string]: string | string[] },
    body?: any,
    fncSuccess?: (responseBody: any) => void,
    fncFail?: (error: HttpErrorResponse) => void
  ): Observable<any> {
    const fullUrl = `${this.baseApiUrl}${urlPath}`;
    const request = this.generateRequest(method, fullUrl, headers, body);

    return this.http.request(request).pipe(
      tap((response: any) => {
        // 成功时触发回调（如果传入了合法的函数）
        if (typeof fncSuccess === 'function') {
          fncSuccess(response.body);
        }
      }),
      catchError((error: HttpErrorResponse) => {
        // 错误处理：排除106状态码，其他情况触发失败回调
        if (error.status !== 106 && typeof fncFail === 'function') {
          fncFail(error);
        }
        // 重新抛出错误，方便订阅者后续处理（可选）
        throw error;
      })
    );
  }

  // 版本2：推荐用RxJS Observable（Angular标准做法）
  customRequestObservable(
    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | string,
    urlPath: string,
    headers?: HttpHeaders | { [key: string]: string | string[] },
    body?: any
  ): Observable<any> {
    const fullUrl = `${this.baseApiUrl}${urlPath}`;
    const request = this.generateRequest(method, fullUrl, headers, body);

    return this.http.request(request).pipe(
      tap(response => response.body),
      catchError((error: HttpErrorResponse) => {
        if (error.status !== 106) {
          // 这里可以统一处理错误，比如打日志、弹提示
          console.error('请求出错啦:', error);
        }
        throw error;
      })
    );
  }
}

• HttpClient的优势：相比AngularJS的$http，HttpClient支持类型安全、拦截器、自动JSON解析等特性，用http.request()可以灵活处理动态请求方法，和原代码逻辑完全匹配。
• 类型定义：TypeScript里给参数和回调都加了类型约束，避免传参错误，让代码更健壮。
• 回调vs Observable：我保留了原代码的回调逻辑（版本1）方便你过渡，同时推荐用Observable（版本2），这是Angular的标准写法，订阅后可以更灵活地处理响应和错误。
• Headers兼容：方法同时支持HttpHeaders对象和普通键值对对象作为headers参数，不用额外转换。

版本1（回调方式）： #

// 在组件里注入MyService后调用
this.myService.customRequest(
  'POST',
  '/user/login',
  { 'Content-Type': 'application/json' },
  { username: 'test', password: '123' },
  (res) => {
    console.log('登录成功:', res);
  },
  (err) => {
    console.log('登录失败:', err.message);
  }
);

版本2（Observable订阅方式）： #

this.myService.customRequestObservable('GET', '/user/info')
  .subscribe({
    next: (res) => console.log('获取用户信息成功:', res),
    error: (err) => console.log('获取用户信息失败:', err)
  });

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