RxJs wrap function in Observable - rxjs

Question

I have a question how do you wrap a normal sync code inside observable. Let's take this example:
let isCalling = false;
function makeHttpCall(url) {
isCalling = true;
return rxJsFetch(url).pipe(tap(() => (isCalling = false)));
}
Problem with that function is that isCalling flag will be set no matter if someone subscribes or not. I don't want that (becuase it is not calling yet). To combat that I usually do something like:
let isCalling = false;
function makeHttpCallWrapped(url) {
return of(null).pipe(
mergeMap(() => {
isCalling = true;
return rxJsFetch(url).pipe(tap(() => (isCalling = false)));
}),
);
}
And that works, isCalling is set only after subscribe.
Problem with that code is that it is not very elegant, nor clear to someone starting with RxJs. My question to you is, how do you handle that? Is there something in RxJs that I don't know about that handles it more gracefully?

Answer 1

RxJS Defer Operator
Defer lets you create an observable upon subscription. It's exactly a cleaner version of what you're already doing.
let isCalling = false;
function makeHttpCall(url) {
return defer(() => {
isCalling = true;
return rxJsFetch(url).pipe(tap(() => (isCalling = false)));
});
}

Answer 2

To make it more graceful I create a helper method fromFunction:
import { of } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { SubscribableOrPromise } from 'rxjs/src/internal/types';
export function fromFunction<T>(func: () => SubscribableOrPromise<T>) {
return of(undefined).pipe(mergeMap(func));
}
And then use it like:
let isCalling = false;
function makeHttpCallWrapped(url) {
return fromFunction(() => {
isCalling = true;
return rxJsFetch(url).pipe(tap(() => (isCalling = false)));
});
}
I kind of feel like from should also accept input like that.