Angular4+TypeScript2.2.2下NativeScript传对象参数报错求助

我来帮你搞定这个NativeScript里的API请求问题！

核心原因：URL参数未正确编码 #

你遇到的问题本质是URL参数的编码问题：当你把JSON对象直接拼接成字符串放到URL里时，其中的{}、"、:这些特殊字符没有被URL编码。Web浏览器环境中，浏览器会自动帮你处理这些特殊字符的编码，但NativeScript的HTTP客户端依赖原生平台的网络组件，不会自动做这件事，导致请求的URL格式不合法，最终出现“status:200 for URL: null”的奇怪报错（服务器可能返回了200，但客户端解析URL时出错）。

两种有效解决方案 #

方案一：手动编码JSON参数

用encodeURIComponent()方法对生成的JSON字符串进行编码，确保特殊字符被正确转义：

getData(serverUrl, type, skip_limit) {
  console.log(serverUrl);
  let headers = this.createRequestHeader();
  let token_value = localStorage.getItem('access_token');
  // 用JSON.stringify生成标准JSON字符串，比手动写更可靠
  const filter = JSON.stringify({"limit":"10","skip":"0"});
  // 对filter参数进行URL编码
  const encodedFilter = encodeURIComponent(filter);
  const url = this.apiUrl + serverUrl + '?token=' + token_value + '&filter=' + encodedFilter;
  
  return this.http.get(url, { headers: headers })
    .map(res => res.json());
}

方案二：用HttpParams构建查询参数（推荐）

Angular的HttpParams会自动帮你处理参数编码，代码更整洁也更符合最佳实践，避免手动拼接URL的错误：

getData(serverUrl, type, skip_limit) {
  console.log(serverUrl);
  let headers = this.createRequestHeader();
  let token_value = localStorage.getItem('access_token');
  
  // 构建查询参数，自动处理编码
  const params = new HttpParams()
    .set('token', token_value)
    .set('filter', JSON.stringify({"limit":"10","skip":"0"}))
    // 如果需要添加search参数也一样处理
    .set('search', JSON.stringify({"search":"","latitude":"","longitude":"","categories":"","address":"","type":"upcoming"}));
  
  return this.http.get(this.apiUrl + serverUrl, { 
    headers: headers,
    params: params
  }).map(res => res.json());
}

补充说明 #

你可以对比一下编码前后的filter参数：

• 未编码：{"limit":"10","skip":"0"}
• 编码后：%7B%22limit%22%3A%2210%22%2C%22skip%22%3A%220%22%7D
  服务器只有收到编码后的参数，才能正确解析成JSON对象。

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