如何在Angular HttpClient中对请求参数字段进行映射转换

你可以根据自己项目的实际情况选择以下3种实现方案：

方案1：手动映射（推荐字段少、仅单个接口需要转换时使用） #

直接在提交请求前构造符合后端要求的请求体，逻辑完全可控，无额外性能开销：

register(registration: Registration) {
    console.log('Registration submitted', registration);
    const requestPayload = {
      email: registration.email,
      first_name: registration.firstName,
      last_name: registration.lastName
    };
    return this.http.post(`${environment.authUrl}/auth/register`, requestPayload).pipe(
       catchError(err => {
            console.log('Handling error locally and rethrowing it...', err);
            return throwError(err);
       })
    );
}

方案2：通用工具函数转换（适合多接口需要转换、字段较多的场景） #

封装一个驼峰转下划线的通用函数，需要用到的地方直接调用即可：
首先编写转换工具函数：

/**
 * 驼峰命名对象转下划线命名对象，支持嵌套对象、数组
 */
function camelToSnake(obj: Record<string, any>): Record<string, any> {
  // 非对象类型直接返回
  if (obj === null || typeof obj !== 'object') return obj;
  // 数组元素逐个转换
  if (Array.isArray(obj)) return obj.map(item => camelToSnake(item));
  const result: Record<string, any> = {};
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      const snakeKey = key.replace(/[A-Z]/g, match => `_${match.toLowerCase()}`);
      result[snakeKey] = camelToSnake(obj[key]);
    }
  }
  return result;
}

调用方式：

return this.http.post(`${environment.authUrl}/auth/register`, camelToSnake(registration)).pipe(
  // 原有逻辑不变
)

方案3：全局HTTP拦截器转换（适合绝大多数后端接口都要求下划线命名的场景） #

通过Angular的Http拦截器全局处理所有请求的参数转换，无需修改业务接口代码：

1. 新建驼峰转下划线拦截器：

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

@Injectable()
export class CamelToSnakeInterceptor implements HttpInterceptor {
  private camelToSnake(obj: Record<string, any>): Record<string, any> {
    if (obj === null || typeof obj !== 'object') return obj;
    if (Array.isArray(obj)) return obj.map(item => this.camelToSnake(item));
    const result: Record<string, any> = {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        const snakeKey = key.replace(/[A-Z]/g, match => `_${match.toLowerCase()}`);
        result[snakeKey] = this.camelToSnake(obj[key]);
      }
    }
    return result;
  }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 可自定义过滤规则，比如只处理指定域名的请求、只处理POST/PUT请求
    if (request.body && typeof request.body === 'object') {
      const transformedBody = this.camelToSnake(request.body);
      request = request.clone({ body: transformedBody });
    }
    return next.handle(request);
  }
}

2. 在AppModule中注册拦截器：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CamelToSnakeInterceptor } from './camel-to-snake.interceptor';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CamelToSnakeInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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