Angular 2登录接口返回对象但调用res.json()提示非函数问题

我来帮你梳理下这个问题的根源和解决办法：

错误原因 #

在Angular 2+的项目里，如果你用的是**HttpClient模块**（从@angular/common/http导入），它会自动帮你把服务器返回的JSON响应解析成JavaScript对象。这时候res已经是解析好的对象了，不再是原始的Response类型，所以调用res.json()自然会抛出“不是函数”的错误。

要是你用的是旧版的Http模块（@angular/http），才需要手动调用.json()解析响应体，但这个模块现在已经被废弃，官方推荐用HttpClient。

具体解决方案 #

1. 移除.json()调用，直接使用响应对象

修改你的代码，去掉多余的.json()调用，直接处理res即可：

userLogin(f){ 
  this.auth.login(f.value) 
    .subscribe(res => { 
      console.log('Response: ', res); // 直接打印解析后的对象
      // 根据接口返回的字段判断是用户数据还是错误信息
      if (res.userInfo) { // 假设存在用户时返回的对象包含userInfo字段
        this.navCtrl.push('TabsPage');
      } else if (res.errorMsg) { // 假设无用户时返回的对象包含errorMsg字段
        console.log('登录失败：', res.errorMsg);
      }
    }, err => { 
      console.log('HTTP请求异常：', err); 
    }) 
}

2. 注意接口的响应逻辑

你提到无用户时接口返回含错误信息的对象，但如果HTTP状态码还是200的话，err回调不会触发——因为只有当HTTP状态码是错误码（比如400、401等）时才会进入错误回调。所以你需要在res的回调里手动判断返回内容是成功还是失败，根据接口约定的字段来处理。

3. 确认auth.login的实现

确保你的AuthService里是用HttpClient实现的登录请求，示例如下：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) {}

  login(credentials: any) {
    // 返回的Observable直接是解析后的JSON对象
    return this.http.post('/your-login-api-url', credentials);
  }
}

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