在 Angular 10 promise 没有执行

Question

In my project I'm using Angular 10, I have to call one API request async way. So I tried with promises. but while executing the code it's not called the API. It always exists with the first line itself. I wasn't able to find the reason for this. It's not going for resolved or rejected.

This is my ts.code:

public setUser(): () => Promise<any> {
return (): Promise<any> => {
  return new Promise((resolve, reject) => {
    //get user details
    this.api.get<any>(environment.apiUserRoot + `/Users/current`).subscribe(
      userData => {
        this.storage.clearIdentity();
        this.assignLoginUserToUser(userData.body);
      },
      err => {
        this.storage.clearIdentity();
      }
    );
  });
};
}

 private assignLoginUserToUser(user: UserModel): void {
    this.loginUser = user;
 }
 

public getUserContext(): UserModel {
   this.setUser();
   return this.loginUser;
}

Answer 1

It's a bit too complex, I would rather simplify it by doing something like this:

public setUser(): void {
  this.api.get<any>(environment.apiUserRoot + `/Users/current`).subscribe({
    next: (userData) => {
      this.storage.clearIdentity();
      this.assignLoginUserToUser(userData.body);
    },
    error: (err) => {
      this.storage.clearIdentity();
    },
  });
}

It is not clear from the usage if you actually need a return value, but if you do, then you have a few options depending on the rxjs version that you use:

• If you don't have firstValueFrom :

public setUser(): Promise<any> {
  return this.api.get<any>(environment.apiUserRoot + `/Users/current`)
  .toPromise().then(userData => {
    this.storage.clearIdentity();
    this.assignLoginUserToUser(userData.body);
    return userData;
  }).catch(() => {
    this.storage.clearIdentity();
  });
}

• If you have firstValueFrom then you could do it like this:

public setUser(): Promise<any> {
  return firstValueFrom(this.api.get<any>(environment.apiUserRoot + `/Users/current`))
  .then(userData => {
    this.storage.clearIdentity();
    this.assignLoginUserToUser(userData.body);
    return userData;
  }).catch(() => {
    this.storage.clearIdentity();
  });
}

For getting the user, you have a couple of options depending on your async implementation choice (observable or promise; I personally recommend observables):

• With observables, the setUser should not perform the subscribe itself, and do the things it needs to do as a side effect using tap and return the observable to be used later by the calling code.

public setUser(): Observable<UserModel> {
  return this.api.get<any>(environment.apiUserRoot + `/Users/current`).pipe(
    tap(result => {
      this.storage.clearIdentity();
      this.assignLoginUserToUser(result.body);
      return result.body;
    }),
    catchError(err => {
      this.storage.clearIdentity();
      return of(null);
    })
  );
}

The getUserContext should not be synchronous anymore, but return an Observable instead:

public getUserContext(): Observable<UserModel> {
   return this.setUser();
}

This implies that you need to adjust the calling code to subscribe to this observable returned by the getUserContext method like this:

getUserContext().subscribe(user => {
  // do something with the user here.
});

• With promises, you need to return the promise that you obtained from the setUser method using any of the implementations above (with .toPromise or firstValueFrom )

public getUserContext(): Promise<UserModel> {
   return this.setUser().then(result => result.body);
}

The calling code in this case also needs some adjustments, in order to accommodate the fact that getUserContext is not synchronous anymore:

const user = await getUserContext();

or using then

getUserContext().then(user => {
  // do something with the user here.
});