Angular HTTP-запрос возврата не определен - PullRequest
Новая
       9

Angular HTTP-запрос возврата не определен

0 голосов
/ 02 апреля 2020

Я пытаюсь сделать HTTP-запрос на получение, принимает в качестве параметра userId и возвращает один профиль пользователя, используя Angular, но продолжает возвращать неопределенные данные. Я знаю, что проблема не в моем бэкэнд-сервере, потому что тот же HTTP-запрос на получение с почтальоном работает правильно. Кроме того, я получаю это исключение (бэкэнд записан в Java) из моего Angular HTTP-запроса, но не из 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 неправильно. Кто-нибудь знает, что я делаю неправильно?

РЕДАКТИРОВАТЬ: Вот снимок экрана ошибка из консоли браузера. Не уверен, что это актуально.

Ответы [ 2 ]

2 голосов
/ 03 апреля 2020

Вызов this.profileService.getProfile() возвращает наблюдаемое, равное 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. Не уверен, в чем разница между вашим запросом почтальона и вашим запросом Angular.

Исправление console.log решит вашу ошибку undefined. Надеюсь, это поможет вам выяснить ошибку Java. Эта ошибка Java связана с веб-сокетом или чем-то еще. Просто сделаю неверное предположение, но я сомневаюсь, что ваш HTTP-вызов для получения профиля вашего пользователя вызывает эту ошибку.

1 голос
/ 02 апреля 2020

HTTP-запросы разрешаются асинхронно, поэтому при печати console.log( this.profile ); GET-запрос все еще не разрешен, и поэтому значение, присвоенное this.profile, по-прежнему не определено. Если вы хотите увидеть значение, просто поместите console.log( this.profile ); внутри подписки после выполнения задания profile => this.profile = profile,.

...