對於所有 HttpClient 方法，該方法不會開始其 HTTP 請求，直到開發人員在該方法返回的 observable 上呼叫 subscribe()。

這適用於所有 HttpClient 方法。

下圖的 loadLanguages 是 SAP Spartacus 前端實現裡獲取語言列表的方法，裡面第 28 行呼叫了 HTTPClient 輸入的例項 http 的 get 方法。這個方法返回一個 Observable.

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

Angular 裡直接呼叫 loadLanguages 是不會觸發真正的 HTTP 請求的。這是因為，從 HttpClient 方法返回的所有 observables 在設計上都稱之為 `Code Observable` 。 HTTP 請求的執行被延遲，讓開發人員可以在實際發生 HTTP 請求傳送之前，使用諸如 tap 和 catchError 之類的附加操作來擴充套件 observable。

只有呼叫 subscribe() ，才會觸發 observable 的執行，並導致 HttpClient 編寫 HTTP 請求並將其傳送到伺服器。

將這些 observables 視為實際 HTTP 請求的`blueprints`.

事實上，每個 subscribe() 都會啟動一個單獨的、獨立的 observable 執行。 訂閱兩次會產生兩個 HTTP 請求。

因此，我們如果在 SAP Spartacus 程式碼裡，使用變數來儲存程式碼27 行 loadLanguages 返回的 Observable，並且訂閱兩次這個變數，會觸發兩個傳送往 SAP Commerce Cloud 後臺的 HTTP 請求。

我們檢視 SAP Spartacus 程式碼，SiteConnector 呼叫了 SiteAdapter 的該方法。再檢視哪個方法呼叫了 SiteConnector 的 getLanguages 方法。可以使用 Visual Studio Code 的 `Ctrl+Tab` 快捷鍵來加速檔案間的切換。

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

SAP Spartacus 使用了 NgRx 框架來進行 State management，LanguagesEffects 類的實現裡，呼叫了 siteConnector 的 getLanguages.

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

這裡程式碼第 26 行使用了 exhaustMap，這個 Operator 的效果和 switchMap 相反。

如果請求 A 已經發出但尚未被伺服器端處理，那麼請求 B 再發出，switchMap 會自動 cancel A 請求，傳送 B 請求。

如果替換成 exhaustMap，則 B 請求會被忽略，而 A 請求則不受影響。

exhaustMap 適用於應對那些當點選了一個按鈕之後發覺頁面沒有任何反映，於是傾向於重複點選同一按鈕的使用者。

Angular HTTPClient 傳送請求的觸發方式討論

相關文章