如何在不使用 await 的情况下使用 .then() 等待并使用订阅的发出值？

Question

I have two methods, the first one subscribes to the value of a service which in turn receives a value from a back-end API. I need to make use of this value in a separate method, so therefore I need to wait for the value of the API to be returned by the first method.

The issue is that I don't want to turn the whole method async by using the await keyword, so instead I figured that making the first method return a promise and then using.then() to await the value would work. However when I run my code the console.log is just printing undefined.

  async determinePreselectedUsers(googleUsers: GoogleUser[]): Promise<any> {
    let emails: string[] = [];

    googleUsers.forEach(user => {
      emails.push(user.email);
    });

    await this._usersService.determinePreselectedUsers$(emails).subscribe(res => {
      return res;
    });
  }

  onOUSelect(selectedOrganisationalUnitPath: string) {
    this._usersService.getGoogleUsers$(selectedOrganisationalUnitPath).subscribe((googleUsers: GoogleUser[]) => {
       this.determinePreselectedUsers(googleUsers).then( preselectedUsers => {
         console.log("Preselected users: ", preselectedUsers); //This is undefined
       });
    });
  }

I assume there's a way to make this work without using await?

Answer 1

This is not the first time I've seen people use async/await on observable and I wonder where the confusion comes from or even if I'm the one being confused here.

Anyway:

There are many things wrong in this single line:

await this._usersService.determinePreselectedUsers$(emails).subscribe(res => {
  return res;
});

• you are using await with a subscription object
• your observable seems to be a function which has the same name as the function you are calling this with (minus the $)
• your callback in subscribe doesn't do anything.

My guess is that you hope to wait for the subscription to resolve and have the res declared in the scope.

You'd have to do something like this

obs1.pipe(
  switchMap(result1 => fetchSomethingElse(result1))
).subscribe(result2 => console.log(result2));

Which in your snippet would be:

 determinePreselectedUsers(googleUsers: GoogleUser[]): Observable<any> {
    let emails: string[] = [];

    googleUsers.forEach(user => {
      emails.push(user.email);
    });

    return this._usersService.determinePreselectedUsers$(emails); 
  }

  onOUSelect(selectedOrganisationalUnitPath: string) {
    this._usersService.getGoogleUsers$(selectedOrganisationalUnitPath).pipe(
      switchMap(googleUsers: GoogleUser[]) =>   this.determinePreselectedUsers(googleUsers)),
    }).subscribe(preselectedUsers => {
       console.log("Preselected users: ", preselectedUsers); //This is undefined
    });
  }

Answer 2

determinePreselectedUsers should return value using resolve function inside returned Promise , not return value directly.

Try this:

determinePreselectedUsers(googleUsers: GoogleUser[]): Promise<any> {
    return new Promise((resolve, reject) => {
        let emails: string[] = [];

        googleUsers.forEach(user => {
          emails.push(user.email);
        });

        this._usersService.determinePreselectedUsers$(emails).subscribe(
            // return response in then using resolve
            resolve,
            // return error in catch using reject
            reject
        );
    });
}

or, You can use toPromise function of Observable, like:

determinePreselectedUsers(googleUsers: GoogleUser[]): Promise<any> {

    let emails: string[] = [];

    googleUsers.forEach(user => {
            emails.push(user.email);
    });

    return this._usersService.determinePreselectedUsers$(emails).toPromise();
}

Answer 3

You can simplify your source code to fewer lines using a map operator and switchMap to switch to another observable. The key benefit of using Rxjs is that it allows us to write declaratively what the logic does. Promises are perfectly fine to use, but they describe the resolving of data while reactive programming describes how data flows.

function onOUSelect(selectedOrganisationalUnitPath: string) {
    const pluckEmails = users => [users, users.map(user => user.email)];
    const handleEmails = ([users, emails]) => this._usersService.determinePreselectedUsers$(users, emails);

    this._usersService.getGoogleUsers$(selectedOrganisationalUnitPath).pipe(
        map(pluckEmails),
        switchMap(handleEmails)
    ).subscribe(values => console.log(values)); // you must subscribe!
}

The use of async/wait has some known side effects including error handling, difficulties with concurrency and the fact that it is syntax sugar for writing promises. When you use toPromise() with an observable you inherently change the behavior of how an observable handles errors and empty states. There are times when you need to use it, but falling back to toPromise() so you can continue to work with promises is an anti-pattern in Angular.

Observables are the first thing you need to learn in Angular, and the only thing you'll never finish learning.

Answer 4

Below should work

determinePreselectedUsers(googleUsers: GoogleUser[]): Observable<any> {
    let emails: string[] = [];

    googleUsers.forEach(user => {
      emails.push(user.email);
    });

    return this._usersService.determinePreselectedUsers$(emails);
  }

  onOUSelect(selectedOrganisationalUnitPath: string) {
    this._usersService.getGoogleUsers$(selectedOrganisationalUnitPath).subscribe((googleUsers: GoogleUser[]) => {
       this.determinePreselectedUsers(googleUsers).then( preselectedUsers => {
         console.log("Preselected users: ", preselectedUsers); //This is undefined
       });
    });
  }