Angular 按照開發人員提供的 HTTP Interceptors 的順序來`依次` 呼叫這些攔截器。

例如，考慮這種例子，開發人員希望處理 HTTP 請求的身份驗證，並在將它們傳送到伺服器之前記錄它們。要完成這個場景，可以按順序先提供 AuthInterceptor，然後再提供 LoggingInterceptor.  Angular 應用傳送出的請求，將從 AuthInterceptor 流向 LoggingInterceptor。相應的，這些請求的響應將反向流動，即從 LoggingInterceptor 返回到 AuthInterceptor.

以下是該過程的圖形化表示：

![](https://img-blog.csdnimg.cn/img_convert/5522330277a71660d2fb325fe3dc4396.png)

流程中的最後一個攔截器始終是處理與伺服器通訊的 HttpBackend.

SAP Spartacus 開發中為令牌 `HTTP_INTERCEPTORS` 提供的絕大多數 Interceptor，都定義在 barrel 檔案即 `index.ts` 內：

![](https://img-blog.csdnimg.cn/img_convert/e7f3ede9ffcd749924a195ee6808bfe7.png)

這些 Interceptor 彼此之間在業務上並沒有依賴關係，所以沒有嚴格的先後順序定義要求。

大多數 HttpClient 方法返回 `HttpResponse<any>` 的 observables。 `HttpResponse` 類本身實際上是一個事件，其型別為 `HttpEventType.Response`. 但是，單個 HTTP 請求可以生成多個其他型別的事件，包括上傳和下載進度事件。 `HttpInterceptor.intercept()` 和 `HttpHandler.handle()` 方法返回 `HttpEvent<any>` 的 observables.

下面是 SAP Spartacus 一個具體的 Interceptor 例子：

![](https://img-blog.csdnimg.cn/img_convert/3c2b21e1e0f088d39d233e2b7a119cf4.png)

許多攔截器只關心傳出請求並從 next.handle() 返回事件流而不修改它。 然而，一些攔截器需要檢查和修改來自 next.handle() 的響應； 這些操作需要識別到流中的所有這些事件。

上圖是 Spartacus Cart Checkout 場景使用 Interceptor 進行錯誤處理的一個例子。

首先從 `rxjs/operators` 裡匯入 Rxjs 執行錯誤處理的運算子 `catchError`：

![](https://img-blog.csdnimg.cn/img_convert/f0588e3918565eb53fa146bc9611ae17.png)

當 HTTP 互動出現錯誤時，傳入 catchError 運算子的箭頭函式觸發，如果觸發時的例項變數 `response` 的型別為 `HttpErrorResponse`，那麼繼續判斷當前的路由路徑，是否包含了 checkout 片段：

![](https://img-blog.csdnimg.cn/img_convert/b834d60bb98957a79a2588966552973d.png)

這個判斷透過下列函式執行：

```typescript
  /**
   * Returns true if the parameter semantic route is part of "checkout"
   * Checkout semantic routes:
   * checkout
   * checkoutPaymentType
   * CheckoutShippingAddress
   * checkoutDeliveryMode
   * checkoutPaymentDetails
   * checkoutReviewOrder
   * checkoutLogin
   * @param semanticRoute
   */
  protected isUserInCheckoutRoute(semanticRoute?: string): boolean {
    return semanticRoute?.toLowerCase().startsWith('checkout') ?? false;
  }
```

如果上述函式返回 true，則透過 `this.routingService.go`, 重定向到 cart 頁面：

![](https://img-blog.csdnimg.cn/img_convert/6ac996abf58a2cb3134f892c6315535d.png)</any></any>

關於 SAP Spartacus Angular HTTP Interceptor 的攔截順序

相關文章