[Question][or Request?] a smoother way to create asynchronous void functions?

[arnotes]

consider the following async function using the promise pattern

async loadStudents(){ //this also gets auto typed as Promise<void>
  this.students = await api.get('students'); //lets assume api.get returns a promise
}
//this allows me to make cleaner function calls on html templates
<button (click)="loadStudents()">
//this also allows me to optionally await loadStudents for probable chaining
await this.loadStudents():
await this.loadTeachers();

how ever I cannot do this with cold observables(which majority of http functions are
i find myself having to do this alot

loadStudents(){
    return api.get('students').pipe(map(x => {
      this.students = x;
    }))
}
//this approach works but it reeks codesmell when you have to execute it on html side
<button (click)="loadStudents().subscribe()">
//the other alternative is to explicitly add an event dedicated for click which is 
  //something id like to avoid just for the sake of relaying a function to another function
<button (click)="onBtnClick()">

the other approach we have is to inline a dedicated subject as a flag

loadStudents(){
    const done$ = new Subject<void>();
    api.get('students').subscribe(x => {
      this.students = x;
      done$.next();
    });
    return done$.pipe(take(1));
}

is there anything similar to below? or at least something i can use to compose a executeAsVoid operator?

.pipe(executeAsVoid(data => { dosomething }));?

[raymonddavis]

I don't think you can await an Observable because Observable can be never-ending.

That being said if you have an observable-based HTTP client that you know is going to return 1 item only (like take(1) on all the calls) you could do this.

async loadStudents(){
    this.students = await api.get('students')
        .pipe(map(x => {
            this.students = x;
        }))
        .toPromise();
}

Promises can be awaited so just set up your observable and then add toPromise() at the end and you should now be able to await it.

Another method would be doing

loadStudents(){
    api.get('students')
        .pipe(tap(x => {
            this.students = x;
        }))
        .subscribe();
}

You could use tap to do something on "the side" with the response from the api.get.

Since the tap method can not be awaited chaining 2 of these methods together will not guarantee order.

Hopefully, that helps.

[cartant]

firstValueFrom and lastValueFrom were added in version 7:

import { firstValueFrom } from "rxjs";
const students = await firstValueFrom(api.get('students'));

[arnotes]

I don't think you can await an Observable because Observable can be never-ending.

That being said if you have an observable-based HTTP client that you know is going to return 1 item only (like take(1) on all the calls) you could do this.

async loadStudents(){
    this.students = await api.get('students')
        .pipe(map(x => {
            this.students = x;
        }))
        .toPromise();
}

Promises can be awaited so just set up your observable and then add toPromise() at the end and you should now be able to await it.

Another method would be doing

loadStudents(){
    api.get('students')
        .pipe(tap(x => {
            this.students = x;
        }))
        .subscribe();
}

You could use tap to do something on "the side" with the response from the api.get.

Since the tap method can not be awaited chaining 2 of these methods together will not guarantee order.

Hopefully, that helps.

no i dont mean a literal async await. thats why on my example i have a done$ subject. i meant await or chain via concat/switchmap/mergemap. i need an operator that is similar to connect(). so i can create observable<< void >> functions. without having to call myFunction().subscribe(). look at my third example.

[raymonddavis]

https://stackblitz.com/edit/rxjs-sync-void

Look at load2. Is that your goal? to have a tap operator that "subscribes" without calling subscribe or publish/connect?

Tap is a void operator, having a void operator that executes the stream seems like it would cause confusion like what happens if you use that executeAsVoid and then subscribe?

If I have void functions that run on a stream I set them up using tap and I subscribe them all at once so they are clearly defined in a group.

[voliva]

IMO rxjs is not the best choice if you want to use these kind of patterns. What's wrong with using a promise to load the list of students?

The way I see how rxjs can be used in here is if you refactor the whole thing from the ground up. This pattern:

loadStudents(){
    return api.get('students').pipe(map(x => {
      this.students = x;
    }))
}

is not something that RxJS was meant to do. RxJS is declarative, and lazy.... that's why I'd advise minimising side effects inside your operators. I feel it would be best represented as:

this.students = api.get('students').pipe(
  shareReplay() // In case you want to load just once and keep it cached forever.
)

And you can keep adding in more features. e.g. Do you need to repeat the call to refresh the list every few seconds? There's an operator for that, repeatWhen()

The only problem this approach has is that this.students is not a list of students, but an observable. Note that maybe it's actually better, since previously it could be undefined or the list, whereas now it will always be an Observable. If you want to get the value of it, then you must subscribe, but this will also let you get the refreshed value when it changes, or keep composing more state by combining different observables you might have.

If you want to get the value just once, then you have firstValueFrom to convert it to a promise and use it as needed.

Edit - Please take my message as a kind advice. My point is that although you can use rxjs as the way of your original question, it will look odd in one way or the other.