Is it bad practice to use many nested switchMap?

Question

I have HTTP interceptor. In that interceptor, before I change the request, I need a loader to turn be turned on.
What really worries me is that I end up having lots of switchMaps.

why?

1. loader is asynchronous
2. I also need to translate the message passing from interceptor to loader service. Translating messages is also asynchronous. In interceptor, I should run the request when loader and translating finishes

What I do in my loader service

public showLoader(message) {
    return this.translateService.get(message).pipe(
        switchMap((translatedMessage) => {
            this.loader$ = from(
                this.loadingController.create({ message: translatedMessage })
            );
            return this.loader$.pipe(
                switchMap((loader) => {
                    return from(loader.present());
                })
            );
        })
    );
}

in my interceptor

public intercept(request: HttpRequest<any>, next: HttpHandler) {
  return this.loaderService.showLoader("WAITING").pipe(
     take(1),
     switchMap( ()=>{

so there are already 3 nested switchMaps. And below it, I need 2 or 3 more switchMaps (one for getting tokens from storage and one for something else). Basically end up having 5 switchMaps.

Question: Is nesting all these switchMaps considered an anti-pattern?

Answer 1

It's fine to use many switchMap especially when you need asynchronous behaviour, the bad practice is to touch things outside of the data stream.

In your code this.loader$ is an example of it, instead of using variables outside of a stream try to build a pipe that does everything you want inside of itself.

You can even omit from if this.loadingController.create and loader.present are Promise like, switchMap supports Observable, Promise, Array and Iterator.

Your code could be like that

    public showLoader(message) {
        return this.translateService.get(message).pipe(
            switchMap(translatedMessage => this.loadingController.create({message: translatedMessage})),
            switchMap(loader => loader.present()),
        );
    }