typescript/javascript promise into rxjs

I have some code like below:

async someFunction(){ 
    ... 
    await apiRequest()
    ...
  }

apiRequest(){
    return new Promise(resolve=>{
      this.httpClient.getAuth('/api')}.subscribe({
        next: res => {
            ...
            resolve(true)
        },
        error: error => { resolve(false) }
      })
    )
  }

This code is a little bit ugly. Is there any other way to synchronize call of function without using a promise ? Maybe with usage of rxjs? I just need to know that api call finished.

Promises are not the Angular way, Angular is built upon RxJs so it is best to stick to RxJs. apiRequest should return the observable rather than convert it to a promise.

apiRequest() {
  return this.httpClient.getAuth('/api').pipe(
    // optional, only if you want service level error handling
    catchError(err => { yourDealWithErrrorFunction(err); })
  );
}

then you subscribe where you use it.

someFunction() {
  apiRequest().subscribe({
    next: res => { doStuffWithRes(res); },
    error: err => { handleError(err); }
  });
}

or we use the async pipe to manage subscriptions in components

apiData$ = this.service.apiRequest(); // optionally use a catchError if you want

and in the template

<ng-template *ngIf="apiData$ | async as apiData">
  apiData is: {{ apiData | json }}
</ng-template>

This is the most common Angular pattern. Using promises and async/awaits are not recommended. Learn RxJs, it will make you a better Angular dev. Converting an observable to a promise strips it of it's RxJs superpowers. RxJs operators allow you to construct streams out of observables like combining and mapping streams. This is the way, you wont look back at promises once it clicks even though it is a bit overwhelming at first.

There are many ways. One of the simplest I think is to use toPromise from RxJS. But this function is still deprecated since version 7. The new function is lastValueFrom. Works like this:

async someFunction(){ 
    ... 
  try {
    await data = lastValueFrom(apiRequest())
    console.log(data);
  } catch (err) {
    console.log("ERROR");
  }
    ...
}

apiRequest(){
    return this.httpClient.getAuth('/api');
  }

What you can now do is wait for the "someFunction()" like:

async loadAllFunction() {
  await someFunction();
  // All loaded... do what you want.
}

• async / await uses promises (one future value)

• rxjs uses observables where you subscribe to multiple values

  • rxjs also uses .pipe() / .switchMap() to manage multiple future values

I guess what you are looking for is these two methods, which gives you a promise from an observable.

import { firstValueFrom, lastValueFrom } from 'rxjs';


</details>



# 答案4
**得分**: -1

rxJS有一个名为`from`的运算符，用于实现这一功能 - https://www.learnrxjs.io/learn-rxjs/operators/creation/from

<details>
<summary>英文:</summary>

rxJS has a `from` operator for this - https://www.learnrxjs.io/learn-rxjs/operators/creation/from

</details>