HttpClient ― APIからデータを取得する

導入

多くのアプリは、サーバーのAPIからJSONを取ってきて画面に出します。BlazorではHttpClientが標準で用意され、GetFromJsonAsyncでJSONをそのままC#のオブジェクトに変換して受け取れます。非同期・HTTPの知識がそのまま実務になります。

説明

HttpClientを@injectし、OnInitializedAsyncでデータを取得します。取得前は「読み込み中」を出すのが定石です。

@inject HttpClient Http

@if (users is null)
{
    <p>読み込み中...</p>
}
else
{
    <ul>
        @foreach (var u in users)
        {
            <li>@u.Name（@u.Email）</li>
        }
    </ul>
}

@code {
    private List<User>? users;

    protected override async Task OnInitializedAsync()
    {
        users = await Http.GetFromJsonAsync<List<User>>("api/users");
    }

    public record User(int Id, string Name, string Email);
}

• HttpClientは@injectで受け取る（ベースURLはProgram.csで設定）
• GetFromJsonAsync<T>でJSONをTに変換して受け取る（PostAsJsonAsyncで送信も）
• 取得はOnInitializedAsyncで。users is nullの間は「読み込み中」を表示
• 失敗に備えてtry/catchでエラー表示を用意すると親切

まとめ

• APIアクセスはHttpClient＋GetFromJsonAsync<T>
• 取得はライフサイクル（OnInitializedAsync）で行い、取得前はローディング表示
• 送信はPostAsJsonAsyncなど。例外処理も忘れずに

次回: 複数コンポーネントで状態を共有するサービスです。