Ionic登录组件无法获取LoginProvider返回数据的问题求助

你遇到的问题核心是LoginProvider的login方法返回的不是Observable对象，而是已经执行subscribe后的Subscription对象，这就导致你在组件里调用.subscribe()时根本拿不到后端返回的数据，自然console.log(response)会输出undefined。

具体问题点 #

看你的LoginProvider代码：

login(user: any) {
  return this.http.post(this.url+'user/loginEmp',user)
    .subscribe((res: Response ) => console.log(res));
}

这里你直接在provider内部调用了.subscribe()，这个方法返回的是一个Subscription（订阅对象），而不是HTTP请求的Observable数据流。当你在组件里调用this.loginProvider.login(user).subscribe(...)时，相当于在一个Subscription上调用subscribe，这完全不符合RxJS的使用逻辑，所以拿不到响应数据。

修复步骤 #

1. 修改LoginProvider的login方法

把provider里的.subscribe()去掉，直接返回HTTP请求的Observable，让组件自己去订阅处理：

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

@Injectable() 
export class LoginProvider { 
  constructor(public http: HttpClient) { } 
  public url = "http://localhost:8080/"; 

  login(user: any) {
    // 直接返回Observable，不要在这里订阅
    return this.http.post(this.url+'user/loginEmp', user);
  } 
}

2. 组件里的调用保持不变（现在就能正常拿到response了）

你的LoginPage里的onSubmit方法逻辑是对的，只要provider返回了Observable，这里就能正确订阅并获取后端返回的文凭列表：

onSubmit(login:any) { 
  let user: any = { 
    "email": login['email'].trim(), 
    "password" : Md5.hashStr(login['password']).toString() 
  }; 

  this.loginProvider.login(user).subscribe((response)=> { 
    console.log(response); // 现在就能正常打印后端返回的数据了
    if(!this.isEmpty(response)){
      sessionStorage.setItem("CurrentUser", JSON.stringify(response)); 
      this.nav.push(TabsPage); 
    }else{
      this.showError = true; 
    } 
  }, (error) => {
    // 建议加上错误处理，比如登录失败时提示用户
    this.showError = true;
    this.loginError = '登录失败，请检查账号密码或网络连接';
  }); 
}

额外建议 #

• 建议给HTTP请求的响应指定类型，比如定义一个UserWithDiplomas接口，这样代码更规范：

  interface UserWithDiplomas {
    id: number;
    email: string;
    diplomas: Diploma[];
    // 其他字段...
  }
  
  interface Diploma {
    id: number;
    name: string;
    // 文凭相关字段...
  }
  
  // 然后在provider里：
  login(user: any): Observable<UserWithDiplomas> {
    return this.http.post<UserWithDiplomas>(this.url+'user/loginEmp', user);
  }
  

• 别忘了处理HTTP请求的错误情况，比如后端返回401、500等状态码时，给用户友好的提示。

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