Angular如何向接收Java自定义对象参数的GET接口正确发送请求

根因说明 #

Spring MVC对GET请求的对象参数绑定，要求嵌套集合类参数按照参数名[索引].属性名的格式拼接为查询参数，Angular默认的HttpParams序列化逻辑不支持自动转换嵌套对象、数组为该格式，因此直接传递模型对象会无法匹配接口参数规则。

最优实现方案 #

方案1：通用序列化函数（推荐，无额外依赖，灵活度高） #

编写递归序列化函数，自动将嵌套的对象、数组转换为Spring MVC可识别的查询参数格式：

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';

// 类型定义
interface MyObject {
  objString: string;
  // 补充其他字段
}

@Injectable({ providedIn: 'root' })
export class SampleService {
  constructor(private http: HttpClient) {}

  // 通用参数序列化函数
  private buildQueryParams(data: Record<string, any>, prefix = ''): HttpParams {
    let params = new HttpParams();
    Object.entries(data).forEach(([key, value]) => {
      const fullKey = prefix ? `${prefix}[${key}]` : key;
      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
        // 处理嵌套对象
        const nestedParams = this.buildQueryParams(value, fullKey);
        nestedParams.keys().forEach(k => params = params.append(k, nestedParams.get(k)!));
      } else if (Array.isArray(value)) {
        // 处理数组类型
        value.forEach((item, index) => {
          const arrayKey = `${fullKey}[${index}]`;
          if (typeof item === 'object' && item !== null) {
            const arrayNestedParams = this.buildQueryParams(item, arrayKey);
            arrayNestedParams.keys().forEach(k => params = params.append(k, arrayNestedParams.get(k)!));
          } else {
            params = params.append(arrayKey, item);
          }
        });
      } else {
        params = params.append(fullKey, value);
      }
    });
    return params;
  }

  // 业务请求方法
  getSampleData(objectList: MyObject[]) {
    const params = this.buildQueryParams({
      objs: objectList
    });
    return this.http.get<string>('/sample', { params });
  }
}

调用示例：

// 构造请求数据
const testData: MyObject[] = [
  { objString: 'test' },
  { objString: 'test1' }
];
// 发起请求
this.sampleService.getSampleData(testData).subscribe(res => console.log(res));

方案2：全局拦截器配置（适合项目存在大量同类请求） #

如果项目内有多个接口都需要该格式的参数序列化，可以通过HTTP拦截器全局处理，无需每个请求单独调用序列化函数：

// query-param.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class QueryParamInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.method === 'GET' && req.body) {
      const params = this.buildQueryParams(req.body);
      const modifiedReq = req.clone({ params, body: null });
      return next.handle(modifiedReq);
    }
    return next.handle(req);
  }

  private buildQueryParams(data: Record<string, any>, prefix = ''): HttpParams {
    // 复用方案1中的序列化逻辑
  }
}

在根模块注册拦截器：

// app.module.ts
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { QueryParamInterceptor } from './query-param.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: QueryParamInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

注意事项 #

• 参数键名需要和Java类属性名、接口方法参数名完全匹配，大小写敏感
• 可在浏览器网络面板中查看请求的查询参数格式，和测试可用的URL格式对比验证

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