HttpClient & Fetching Data — CompileDaily Study

Penjelasan

HttpClient di-@inject seperti Service biasa (sudah terdaftar otomatis di template Blazor modern), dipakai di dalam OnInitializedAsync() untuk fetch data awal. Dikombinasikan dengan properti nullable untuk menampilkan indikator loading selagi data belum tersedia.

Contoh Konsep

@inject HttpClient Http

@if (produk == null)
{
    <p>Memuat...</p>
}
else
{
    <ul>
        @foreach (var item in produk)
        {
            <li @key="item.Id">@item.Nama</li>
        }
    </ul>
}

@code {
    private List<ProdukDto>? produk;

    protected override async Task OnInitializedAsync()
    {
        produk = await Http.GetFromJsonAsync<List<ProdukDto>>("https://api.contoh.com/produk");
    }

    private record ProdukDto(int Id, string Nama);
}

Praktikum

Buat component DaftarArtikel.razor dengan @inject HttpClient. Di OnInitializedAsync(), fetch dari "https://api.contoh.com/artikel" lewat GetFromJsonAsync<List<ArtikelDto>>(), tampilkan kondisional loading/daftar.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

GetFromJsonAsync<T>() otomatis melakukan deserialize JSON response langsung jadi tipe C# yang kamu tentukan (mis. List<ProdukDto>) — kamu tidak perlu memanggil parsing JSON manual terpisah seperti res.json() di fetch() JavaScript, cukup satu pemanggilan method saja.