Question

大多数httpClient拦截器教程都在捕获错误响应以显示警报。

示例：

https://ionicacademy.com/ionic-http-interceptor/

https://medium.com/@deniscangemi/intercept-http-requests-in-angular-c6392b7b0e0

是否可以使用拦截器为每个HTTP请求提供一个加载程序？

如果是，如何处理或捕获成功的HTTP请求以关闭加载程序。

Answer 1

您还可以在管道内添加一个tap函数，该函数将在每次运行时执行，如下所示：

            import { tap, catchError } from 'rxjs/operators';

            // ...

            return next.handle(clonedReq).pipe(
                tap(data => {
                  // Do your success stuff in here
                }),
                catchError(error => {
                  // Do your error handling in here
                })
            );

Answer 2

我编写了一个简单的服务，该服务使我可以在整个应用程序中启用/禁用加载程序。您只需为API调用提供唯一的名称：

import { Injectable } from "@angular/core";

@Injectable({
    providedIn: "root"
})
export class WatcherService {
    private watchers = new Map<String, Boolean>();

    public isLoading(watcher: String): Boolean {
        return this.watchers.get(watcher) || false;
    }

    public start(watcher: String) {
        this.watchers.set(watcher, true);
    }

    public stop(watcher: String) {
        this.watchers.set(watcher, false);
    }
}

键可以是例如API端点URL。您可以将观察者注入拦截器中。

这样，您可以在任何地方显示加载程序，而不必担心在多层组件之间传递标志/事件，只是为了显示加载程序。

例如，我的应用程序中有一个列表。我可以从许多地方（过滤器，搜索栏或用户向下滚动后）获取列表的新项目。我不必将所有组件都连接到清单上即可显示加载程序，只需调用：

watcher.start('actionName')

并且清单知道，它应该显示加载程序：

<qlisting [loading]="watcher.isLoading(getUnitsActionName)">

如何使用httpClient拦截器捕获成功的请求？

2 个答案: