angular - 使用许多嵌套的 switchMap 是不好的做法吗？

Question

我有 HTTP 拦截器。在那个拦截器中，在我更改请求之前，我需要打开一个加载程序。
真正让我担心的是，我最终有很多 switchMap s。
为什么？

加载器是异步的

我还需要翻译从拦截器传递到加载器服务的消息。翻译消息也是异步的。在拦截器中，我应该在加载器和翻译完成时运行请求

我在装载机服务中做什么

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());
                })
            );
        })
    );
}

在我的拦截器中

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

所以已经有 3 个嵌套 switchMap s。在它下面，我还需要 2 或 3 个 switchMap s(一个用于从存储中获取 token ，另一个用于其他用途)。基本上最终有 5 switchMap s。
问题:是否嵌套所有这些 switchMap被认为是反模式？

Answer 1

多用就好了switchMap特别是当您需要异步行为时，不好的做法是接触数据流之外的事物。

在您的代码中 this.loader$是它的一个例子，而不是在流之外使用变量，而是尝试构建一个管道，在其内部执行您想要的所有操作。

您甚至可以省略 from如果 this.loadingController.create和 loader.present是 Promise喜欢，switchMap支持 Observable , Promise , Array和 Iterator .

你的代码可能是这样的

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