Angular 4.x HttpClient GET请求失败，查询字符串显示[object Object]求助

这个问题我之前在项目里踩过坑，结合你的代码和浏览器里的现象来看，主要是两个核心问题导致的：

1. Angular 4.x 的 HttpClient 不支持直接传普通对象作为 params #

Angular 4.x 版本的 HttpClient 对请求参数的处理还比较严格，不能直接传递普通 JavaScript 对象。如果你直接传{ token:'xxx', appid:3 }，它不会自动把这个对象拆解成键值对，而是会把整个对象当作一个参数的值，最终就会出现你看到的[object Object]这种序列化错误。

2. 参数名与接口要求不匹配，还漏传了必要参数 #

你提供的示例URL里，token参数的名称是__token（带两个下划线），但代码里写的是token；另外示例URL里还有apiversion=1这个参数，你也没在代码里传递，这两个点也会导致接口无法正确识别你的请求。

正确的实现方式 #

首先要确保导入HttpParams类，然后用它来规范构建请求参数：

步骤1：导入依赖 #

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

步骤2：构建参数并发起请求 #

constructor(private http: HttpClient) { }

ngOnInit(): void {
  // 方式1：链式调用set方法逐个添加参数
  const params = new HttpParams()
    .set('__token', '1000001445.k4mv42stmo1h7x1')
    .set('appid', '3')
    .set('apiversion', '1');

  // 方式2：用fromObject批量初始化参数（更简洁）
  // const params = new HttpParams({
  //   fromObject: {
  //     __token: '1000001445.k4mv42stmo1h7x1',
  //     appid: '3',
  //     apiversion: '1'
  //   }
  // });

  // 注意修正URL的笔误，要和示例一致
  this.http.get('https://dev.mywebsite.com/debug/me/user', { params })
    .subscribe(data => { console.log('data', data); });
}

另外还要提一句：你代码里的请求URL是https://dev.website.com，但示例里是https://dev.mywebsite.com，这个笔误一定要修正，否则可能会出现跨域或者地址不存在的问题。

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