網頁內容如果不與後端互動大致上，每次操作都會看到相似的內容，而且難以調整，所以今天要來介紹跟後端互動的方法。

在昨天的介紹可以知道，Blazor WebAssembly 預設就會幫我們設定 HttpClient 服務來與 URIs 傳送要求及接收回應，除此之外範本專案建立時，也會在 _imports.razor 使用 System.Net.Http.Json 命名空間，而今天主要以介紹此命名空間帶來的擴充功能。

在透過 HTTP 要求與回應傳遞資料時，處理 JSON 序列化與反序列化是一件很麻煩的事情，雖然基本上都是透過套件做好底層的行為並提供方法，只管用就對了，但在過往的 .NET 框架都是需要在自行處理 HttpResponseMessage 物件，並且將 JSON 字串轉型成指定型別，而 System.Net.Http.Json 可以說是把這兩件事情包起來了，讓這整件事更流暢。

而在使用 HTTP 要求時，如果後端是走 Restful API 的設計風格勢必少不了 HTTP 動詞的選擇，而此擴充套件提供了 get, post, put 三種動詞的對應方法：

  • GetFromJsonAsync: 以非同步的方式，將 GET 要求傳送至指定的 URI，並將回應主體(Response Body)以 JSON 反序列化後傳回結果，因為有多載方法，以下參數並非所有同名方法皆有，其參數為：

    • client(HttpClient): 用來傳送要求的用戶端。
    • requestUri(string): 傳送要求的目標 URI。
    • type(Type): 反序列化傳回的物件類型，若是泛型方法則不用設定。
    • options(JsonSerializerOptions): 控制反序列化的行為選項。
    • cancellationToken(CancellationToken): 取消語彙基元，可由其他物件或執行緒用來接收取消通知。

    而因為已經反序列化過了，所以傳回值只有兩種 Task<object> 與 Task<TValue>。

  • PostAsJsonAsync/PutAsJsonAsync：以非同步的方式，將 POST/PUT 要求傳送至指定的 URI，並將要求主體(Request Body)的內容序列化為 JSON 字串，而參數用途基本與前者一致，但傳回型別為 Task<HttpResponseMessage>。

而這邊我就以 https://jsonplaceholder.typicode.com/ 的假 API 示範，如何透過 HTTP 要求取得資料內容：

1
2
3
4
5
6
7
@inject HttpClient HttpClient;

@code {
  private List<TodoItem> todoItems;
  protected override async Task OnInitializedAsync() => 
        todoItems = await HttpClient.GetFromJsonAsync<List<TodoItem>>("https://jsonplaceholder.typicode.com/todos");
}

這樣在元件初始化後，就會觸發 HttpClient.GetFromJsonAsync 取得資料並填入 todoItems 變數中，是不是很簡單呀？

以上就是簡單的介紹 HttpClient 的使用方法，但日常使用上，有些 API 可能需要夾帶驗證資料如 Token，那麼今天所教的內容可能就派不上用場了，還是需要自行組裝 HttpResponseMessage 物件，如果不知道如何下手組裝，也可以參考下方的參考資料，對了今天的詳細程式碼在範本程式碼 - Day21唷。

感謝大家的閱讀，我們明天見。

參考資料
從 WebAssembly 呼叫 Web API
Blazor Adding HttpClientHandler to add Jwt to HTTP Header on requests