2020-5-30 Angular 第九章 從Angular 發出HTTP呼叫

[hsiaofung]

• what is Angular 服務?
• when 何時使用
• how 如何建構
• 使用可觀察處理非同步

[hsiaofung]

• 對伺服器發出並解析HTTP呼叫
• 常見案例
• API選項
• 如何在應用程式中運用可觀察。

[hsiaofung]

• HttpClient
  • 使用HttpClient 對伺服器發出呼叫
  • 如何設置應用程式發出呼叫
  • 發出呼叫的步驟
  • 處理回應
  • API 格式與各種選項

[hsiaofung]

步驟

• 伺服器的設置 : ng serve --proxy-config proxy.conf.json
• 使用HttpClientModule
  1. 在AppModule中匯入HttpClientModule
  2. 將HttpClientModule加入imports陣列。
• 發出HTTP的GET/POST呼叫

[hsiaofung]

• /api/stock 的GET可取得股票清單
• /api/stock 的POST加上內容中的新股票，可在伺服器建構股票
• /api/stock/:code的PATCH加上URL中的股票代號與請求內容中的最愛狀態，可改變特定股票的最愛狀態。

[hsiaofung]

• httpClient.get
• httpClient.post

• httpClient.patch

• 它們以URL作為第一個參考，以請求內容作為第二個參數。
• 同源政策 : 因為伺服器和Angular 在不同port 執行，瀏覽器視為不同來源，違反同源政策。
  • 設定proxy : 將伺服器的請求轉到localhost:3000

[hsiaofung]

進階HTTP:

• 深入討論HTTP的API與Angular 的HTTP模組的其他功能。
• 任務一 : 用HTTP的API發送查詢參數，或特定HTTP標頭。
  • 有兩種方式: 使用內建HttpHeaders和HttpParams，或直接傳入JavaScript物件。

[hsiaofung]

• 我們可以選擇觀察 :

  • 回應內容
  • 觀察整個回應
  • 觀察所有事件

• 回應型別

  • 回應視為文字
  • 回應視為blob

• 大多數的情況你只需要觀察body(預設值)，和使用json回應型別的預設值。有5%狀況需要其他選項存取其他東西。新的HttpClient給你操作API的彈性。且在大部分的狀況下容易使用。

[hsiaofung]

攔截程序 :

• 轉換發出的請求，並在傳遞回應前傾聽與轉換。

  • 若有認證憑證則對發出的請求加上一個標頭。
  • 傳遞回應前加以紀錄
  • 請求失敗(回應非200或300時)另行紀錄。

• HttpRequest

• HttpHandler

• 攔截程序鏈

• 攔截程序必須在app module 中加入provider

[hsiaofung]

• 進階可觀察:

  • 加入搜尋股票的功能:

• 輸入並搜尋通常很難，因為:

  • 如果每次按鍵就觸發一個HTTP呼叫，則最後會有很多呼叫，其中大部分都必須忽略。
  • 使用者很少一次就打對，通常會刪除又重打。這也會導致不必要的重複呼叫。
  • 你必須顧慮如何處理非循序的回應。若前面的查詢結果比後面的晚回來。你必須在應用程式的邏輯中處理。

• 攔截程序和進階可觀察都是從chapter-9/simple-http改來的。

[hsiaofung]

• 實際上有兩個呼叫要取得股票清單。

  • Angular 的可觀察預設為冷。因此每次有人訂閱時，可觀察就被觸發。此例中，我們有兩個訂閱者，它們是Async管道，一個是ngFor而另一個是length。因此，相較於使用同一個可觀察，我們最終發出兩個不同的呼叫。

  • Angular 的可觀察預設為冷可觀察。這是什麼意思? 基本上，可觀察只是連接生產方與消費者的函式。

    • 訂閱一個可觀察就產生一個實例建構。這是為何每個訂閱產生新的生產方。

  • 要如何解決?

    • 告訴Angular 共用一個可觀察，防止兩個呼叫。
    • 可以手動訂閱可觀察並捕捉事件回應，且儲存到類別變數中。然後模板可以存取類別變數而非依靠Async管道。

[hsiaofung]

Angular 的可觀察預設為冷可觀察。這是什麼意思? 基本上，可觀察只是連接生產方與消費者的函式。

• 訂閱一個可觀察就產生一個實例建構。這是為何每個訂閱產生新的生產方。
• 可以選擇不用可觀察改用promise。promise在Angular 中可用，你可以對可觀察呼叫toPromise將任何可觀察轉換成promise。

[hsiaofung]

• rxjs/share運算子。
  • 管道加share()，確保無論可觀察有多少訂閱，只有一個會觸發伺服器。
• 在應用程式中使用AsyncPipe時要小心，因為對同一個可觀察使用多個async管道而沒有關於底層的可觀察，會導致多個伺服器呼叫。

[hsiaofung]

• 加搜尋欄，依搜尋條件從伺服器取股票清單。
  • getStocks() 傳入query 參數，設此參數為查詢參數，傳入/api/stock伺服器呼叫。

[hsiaofung]

• 每次按鍵都對伺服器發出一個請求。這非常沒效率。
• 若前面已經發出相同值的請求，則我們會發出重複值的請求。
• 元件訂閱可觀察，必須確保回應是最新而非舊的回應。

[hsiaofung]

• Subject : Subject在RxJS是特殊型別，它同時做為觀察者與可觀察。也就是說它能夠發出事件並訂閱事件。

• debounceTime(500) : 要求串流暫停直到500毫秒內都沒有新事件。如此能確保我們在使用者停止打字半秒後才發出呼叫。

• distinctUntilChanged() : 確保事件只會在值與之前不同時發出(例如 : 使用者輸入搜尋條件test，然後輸入更多字元接著刪除回到原來開始的字)

• switchMap : 將可觀察鏈從一個型別轉換成另一個型別，還能取消舊的訂閱。這能解決未依序的回應問題。

• 使用startWith 可觀察鏈觸發的初始值。確保網頁載入時我們會看到原始的股票清單。

• 使用四個RxJS運算子鏈，我們可以執行應用程式。在搜尋欄未輸入時，它會等你停止打字一段時間後才發出請求。若輸入並刪除回到開始的值，它完全不會發出請求。

[hsiaofung]

總結:

• 如何使用Angular 的HttpClient 發出HTTP呼叫?
• 如何使用HttpClient的標頭與查詢參數?
• 如何設不同的回應細節及不同的回應型別。
• 如何以攔截程序處理HTTP請求與回應的常見情況?
• 如何利用可觀察完成複雜的工作與搜尋範例。