Making execution wait for subscribe() body, Angular14

mouse 0
Viewed 48

As i mentionned above, i use a function that sends an http request to the backend to get some data, which returns an observable; when i call that function, i have to subscribe to it so i can handle its return, then i do some additional code after the subscription, including some if statements, what i noticed is that the code below the subscribe method gets executed before getting the data. i tried working with async an await , but it doesn't seem to work until i convert the return (observable) to a promise, using toPromise(); then it works fine; my question, is there any way to make the code below subscribe until subscribe() finishes, witout using toPromise() (since it is deprecated);

 public login(
    usernameOrEmail: string,
    password: string
  ): Observable<AppUser> {
    /*
      -tried getting data directly from the backend instead of fetching everything onInit(which i think is not a good idea)
      but that dosn't seem to work since return of http request is an observable, and takes a bit more of time,
      and since i need to do more tests on the data returned (as you see below), the code keeps executing 
      without having the data yet.
     
    */
  this.userService.getUserByUsername(usernameOrEmail).subscribe({
      next: (response: AppUser) => {
        this.authenticatedUser = response;
      },
      error: (error: Error) => {
        throwError(() =>error);
      }
    });

    if (this.authenticatedUser == undefined) {
      return throwError(() => new Error('User not found'));
    }
    if (this.authenticatedUser.password != password) {
      return throwError(() => new Error('Bad credentials'));
    }
    return of(this.authenticatedUser);
  }

Thanks in advance.

angular-httpclient observable typescript angular
1 Answers

For those that may have the same issue, I solved it by using toPromise() for the first time, but since it's deprecated I was looking for a better option, hence I found firstValueFrom and lastValueFrom, and since my method should return a single value that was appropriate for me, then my code becomes:

  public async login(
    usernameOrEmail: string,
    password: string
  ): Promise<Observable<AppUser>> {
    try {
      let response = await this.userService.getUserByUsername(usernameOrEmail);
      this.authenticatedUser = await firstValueFrom(response);
    } catch (error) {
      this.errorMessage = error;
    }
    if (this.authenticatedUser == undefined) {
      return throwError(() => new Error('User not found'));
    }
    if (this.authenticatedUser.password != password) {
      return throwError(() => new Error('Bad credentials'));
    }
    return Promise.resolve(of(this.authenticatedUser));
  }

now my code runs perfectly. Thank you so much for those who answered.

mouse0
Related