Angular 2.3.1带user_id的Http Get请求异常求助

我尝试用以下代码发起携带user_id的HTTP GET请求，但无法正常运行：

getProjects(user_id){ 
  this.loadToken(); 
  let headers = new Headers(); 
  headers.append('Authorization', this.authToken); 
  headers.append('Content-Type','application/json'); 
  let params = new URLSearchParams(); 
  params.set('user_id', user_id); 
  return this.http.get('http://localhost:3000/project/all/' , {headers: headers, search: params}) 
    .map(res => res.json()); 
}

但如果直接把user_id拼在请求路径里（比如http://localhost:3000/project/all?user_id=123），请求就能正常返回结果。请问该怎么解决这个问题？

这大概率是Angular版本对请求参数配置项的兼容性问题，我给你几个针对性的解决办法：

方法1：替换search为params配置项（推荐） #

在Angular 4.3+的版本里，官方已经把Http模块的请求参数配置项从search改成了params，这是最标准的解决方式：

getProjects(user_id){ 
  this.loadToken(); 
  let headers = new Headers(); 
  headers.append('Authorization', this.authToken); 
  headers.append('Content-Type','application/json'); 
  let params = new URLSearchParams(); 
  params.set('user_id', user_id); 
  // 把配置里的search换成params即可
  return this.http.get('http://localhost:3000/project/all/' , {headers: headers, params: params}) 
    .map(res => res.json()); 
}

方法2：手动拼接URL参数（兼容所有版本） #

如果你不想纠结版本问题，也可以手动拼接参数到URL上，记得用encodeURIComponent处理特殊字符避免编码错误：

getProjects(user_id){ 
  this.loadToken(); 
  let headers = new Headers(); 
  headers.append('Authorization', this.authToken); 
  headers.append('Content-Type','application/json'); 
  // 处理特殊字符，避免参数乱码
  const encodedUserId = encodeURIComponent(user_id);
  return this.http.get(`http://localhost:3000/project/all/?user_id=${encodedUserId}` , {headers: headers}) 
    .map(res => res.json()); 
}

方法3：改用HttpParams类（适配新版Angular） #

如果你的项目用的是Angular 4.3及以上版本，更推荐使用官方新增的HttpParams类来构建参数：

// 先导入HttpParams
import { HttpParams } from '@angular/common/http';

getProjects(user_id){ 
  this.loadToken(); 
  let headers = new Headers(); 
  headers.append('Authorization', this.authToken); 
  headers.append('Content-Type','application/json'); 
  // 用HttpParams构建参数
  let params = new HttpParams().set('user_id', user_id); 
  return this.http.get('http://localhost:3000/project/all/' , {headers: headers, params: params}) 
    .map(res => res.json()); 
}

另外还有个小细节：你请求URL的末尾有个斜杠/，如果后端路由配置的是/project/all不带斜杠，拼接参数后会变成/project/all/?user_id=xxx，部分后端框架会把这个识别成不同的路由，你可以试着去掉URL末尾的斜杠再测试。

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