Angular 13：Http 攔截器未完成

Question

我有一個 HtppInterceptor 可以在我的應用程序中啟動和停止進度條。 這通常適用於大多數 Http 請求，但我有許多 api 調用，當這些調用發生時，HttpHandler 永遠不會完成，所以進度條不會停止。 我添加了幾個日志點來查看哪些調用沒有最終確定：

    intercept(
    req: HttpRequest<any>,
    next: HttpHandler
): Observable<HttpEvent<any>> {
    console.log('loading', req.url, this.handleRequestsAutomatically);

// If the Auto mode is turned off, do nothing
    if (!this.handleRequestsAutomatically) {
        return next.handle(req);
    }

    this._setLoadingStatus(true, req.url);

    return next.handle(req).pipe(
        finalize(() => {
            console.log('Finished Loading', req.url);

            this._setLoadingStatus(false, req.url);
        })
    );
}

Api 調用創建以下請求：

:authority: localhost:5001
:method: GET
:path: /api/Appointments/ej?appointmentGroupId=1&year=2022&month=1&day=14
:scheme: https
accept: application/json
accept-encoding: gzip, deflate, br
accept-language: en-AU,en-GB;q=0.9,en-US;q=0.8,en;q=0.7
authorization: Bearer <token>
dnt: 1
origin: http://localhost:4200
referer: http://localhost:4200/
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like 
Gecko) Chrome/97.0.4692.71 Safari/537.36

我最初認為 api 調用必須保持某種連接打開，但我看不到會發生這種情況，並且 header 請求中沒有“保持活動”。 api 調用正確返回數據，我看不到任何一端的連接都保持打開狀態。

為什么 HttpClient 調用沒有完成並停止我的進度條？

Answer 1

這是一個設計錯誤。

問題是在 api 庫中，有另一個攔截器在 header 中設置用戶令牌。 在該攔截器中，正在克隆HttpRequest object。

由於第一個攔截器在等待原始請求完成，而第二個攔截器在克隆上調用請求，所以第一個請求從未完成。

將加載指示器服務添加到第二個攔截器並從那里調用_setLoadingStatus(false, req.url)可以解決問題。

編輯：正如 chrisY 在下面指出的，更好的解決方案是更改導入語句的順序，以便LoadingHttpInterceptor最后出現。 這樣它就可以從實時 HttpClient 中運行，並且不會發生錯誤。