如何从HTTP POST请求响应体中获取data_id字段值

嘿，我明白你的问题啦！你现在遇到的问题是因为data["_body"]返回的是一个JSON格式的字符串，不是可以直接访问属性的JavaScript对象，所以直接用data["_body"]["data_id"]肯定取不到值～

问题回顾 #

你当前的代码是这样的：

this.http.post(this.restProvider.restApiUrl+'saveDraft', draftData, options)
 .subscribe(data => {
 console.log(data["_body"]);
 }, error => {
 console.log("Oooops!");
 });

执行后data["_body"]返回的结果是：

{"status":"ok","data_id":"2","statusMsg":"Saved as draft"}

正确的解决方法 #

方法1：手动解析JSON字符串

既然data["_body"]是字符串，我们可以用JSON.parse()把它转换成JavaScript对象，之后就能正常访问data_id属性了：

this.http.post(this.restProvider.restApiUrl+'saveDraft', draftData, options)
 .subscribe(data => {
   // 把JSON字符串转成对象
   const responseObject = JSON.parse(data["_body"]);
   // 现在可以直接访问data_id了
   console.log(responseObject.data_id); // 输出：2
 }, error => {
   console.log("Oooops!");
 });

方法2：使用HttpClient自动解析（推荐，适用于Angular 4.3+）

如果你用的是Angular 4.3及以上版本的HttpClient（注意不是旧的Http模块），它默认会把响应自动解析成JSON对象，你甚至不需要手动处理。如果需要明确指定，也可以在请求选项里设置responseType: 'json'：

this.http.post(this.restProvider.restApiUrl+'saveDraft', draftData, { responseType: 'json' })
 .subscribe(data => {
   // 直接访问data_id即可
   console.log(data.data_id); // 输出：2
 }, error => {
   console.log("Oooops!");
 });

补充说明 #

旧的Http模块返回的是Response对象，它的_body属性是原始的字符串响应；而新的HttpClient模块会自动帮你把JSON格式的响应解析成JavaScript对象，用起来更省心。如果项目允许的话，建议升级到HttpClient哦～

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