如何将Angular 5中HttpParams的值转换为JSON对象？

嘿，我刚好碰到过类似的场景，来给你捋捋怎么搞定这个问题！

首先得搞清楚一个关键点：你用JSON对象作为请求参数发送时，这些参数其实是存在请求body里的，而不是req.params里！req.params对应的是URL路径里的参数（比如/user/:id里的id），req.queryParams才是URL后面的查询参数（比如?name=xxx），这俩都不是你要找的JSON请求体。

正确的做法：直接读取请求体req.body #

当你发送Content-Type为application/json的POST请求时，Angular的HttpRequest对象里的body就是你原本发送的JSON对象，这时候直接用JSON.stringify()格式化就能得到漂亮的对象结构：

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

@Injectable()
export class RequestLoggingInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 打印请求基本信息
    console.log(`发送请求到: ${request.url}`);
    
    // 判断是否是JSON类型的请求体
    const isJsonRequest = request.headers.get('Content-Type')?.includes('application/json');
    if (isJsonRequest && request.body) {
      // 格式化输出JSON请求体，用null和2来美化格式
      console.log('请求参数（原始JSON格式）:', JSON.stringify(request.body, null, 2));
    }

    // 继续传递请求
    return next.handle(request);
  }
}

特殊情况：如果是把JSON转成了HttpParams（查询参数） #

要是你是把JSON对象转成了HttpParams作为URL查询参数发送，那HttpParams本身是个不可变的键值对集合，直接JSON.stringify()只会得到它的内部结构，看不到实际参数。这时候可以写个小工具函数把HttpParams转成普通对象：

function httpParamsToPlainObject(params: HttpParams): Record<string, any> {
  const result: Record<string, any> = {};
  params.keys().forEach(key => {
    const values = params.getAll(key);
    // 处理多值参数（比如数组）
    result[key] = values && values.length > 1 ? values : params.get(key);
  });
  return result;
}

然后在拦截器里这么用：

if (request.params.keys().length > 0) {
  const plainParams = httpParamsToPlainObject(request.params);
  console.log('查询参数（对象格式）:', plainParams);
}

这样就能得到你想要的原始对象形式的参数了！

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