Angular HTTP get 请求返回未定义

Question

我正在尝试发出 HTTP get 请求，将 userId 作为参数并使用 Angular returns 单个用户配置文件，但不断返回未定义的数据。我知道问题不在我的后端服务器上，因为与 Postman 的 HTTP get 请求相同 works correctly. 另外，我越来越 this exception （后端是用 Java 编写的）来自我的 Angular HTTP 请求，而不是来自 Postman HTTP 请求。

profile.component.ts:

profile: Profile;
constructor(private profileService: ProfileService) {
}
ngOnInit() {
  this.getProfile();
}
getProfile() {
  this.profileService.getProfile("5e7bd87e05854a05cc0f6898").subscribe(
    profile => this.profile = profile,
  );
  console.log( this.profile );
}

profile.service.ts:

getProfile(userId: string) {
    let params = new HttpParams().set("id", userId);
    console.log( "executing HTTP get" );

    //return this.httpClient.get<any>( "http://localhost:8080/user", { params: params });
    // I've tried this above method and the one below

    return this.httpClient.get("http://localhost:8080/user", { params: params })
    .pipe(
      map((data: any) => {
        const profile: Profile = new Profile( data.object.id,
                               data.object.username,
                               data.object.password,
                               data.object.fname,
                               data.object.lname,
                               data.object.email,
                               data.object.joined );
        return profile;
      })
    );
   }

console.log( this.profile ) 在浏览器控制台中显示为 undefined。我认为我使用 subscribe 不正确。有人知道我做错了什么吗？

编辑：这是 error 从浏览器控制台。不确定是否相关。

Answer 1

HTTP 请求是异步解析的，因此当您打印 console.log( this.profile ); 时，GET 请求仍未解析，因此分配给 this.profile 的值仍未定义。如果您想查看该值，只需在执行分配 profile => this.profile = profile,.

后将 console.log( this.profile ); 放入订阅中

Answer 2

调用 this.profileService.getProfile() returns 一个 Observable 即 async。所以呼叫流程是这样做的：

this.profileService.getProfile("5e7bd87e05854a05cc0f6898") 启动 HTTP 请求
console.log(this.profile) 被调用（它是 undefined 因为还没有设置）
将来某个时间： HTTP 请求完成
THEN，您的 .subscribe() 中的回调函数运行。（在你的情况下 profile => this.profile = profile,）

要解决您的问题，只需将您的 console.log 移动到您的 .subscribe() 回调中。

getProfile() {
  this.profileService.getProfile("5e7bd87e05854a05cc0f6898").subscribe(profile => {
    this.profile = profile;
    console.log( this.profile );
  });
}

我不确定该错误是如何关联的，因为您尚未发布 notifications.service.ts 代码。这可能与您设置配置文件的方式有关，但如果没有看到其他代码，我无法分辨。 Java 错误也是如此。不确定您的 Postman 请求和 Angular 请求之间有什么区别。

修复 console.log 将解决您的 undefined 错误。希望这能帮助您找出 Java 错误。 Java 错误似乎与 Web 套接字或其他东西有关。随便乱猜，但我怀疑是您用于获取用户个人资料的 HTTP 调用导致了该错误。

Angular HTTP get 请求返回未定义

Angular HTTP get request returning undefined

javascript

http

typescript

http-parameters

angular