iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
1
Modern Web

大內魔術 Blazor - 誰說前端一定要寫JS系列 第 21

魔術技巧 - HTTP 要求與回應

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


在昨天的介紹可以知道,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 要求取得資料內容:

@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


上一篇
相依性注入魔術
下一篇
魔術技巧 - 與 JavaScript 共舞
系列文
大內魔術 Blazor - 誰說前端一定要寫JS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
老屁股
iT邦新手 5 級 ‧ 2020-10-07 00:35:17

十點多看到你還沒PO ...
聽說某 WM 已 ...
撐住阿!

米歐 iT邦新手 3 級 ‧ 2020-10-07 21:24:58 檢舉

哈哈 我也寫得很抖/images/emoticon/emoticon13.gif

我要留言

立即登入留言