Interacțiunea cu API-uri externe (HttpClient)

  • Doru Bulubasa
  • 30 May 2025

Blazor WebAssembly vine cu suport integrat pentru HttpClient, care permite aplicației tale să comunice cu API-uri externe RESTful. În acest articol, explorăm cum să faci asta corect, cu un exemplu real și separare pe servicii.

🔧 Ce este HttpClient?

HttpClient este o clasă din .NET folosită pentru a trimite cereri HTTP către un server. În Blazor WebAssembly, este injectat automat cu o configurație de bază (rooted pe adresa site-ului tău). Pentru cereri către domenii externe, trebuie să setezi BaseAddress manual.

✅ Pași Recomandați

  1. Crearea unui serviciu dedicat

  2. Gestionarea răspunsurilor (inclusiv erori)

  3. Tipuri de cereri (GET / POST)

  4. Serializare / Deserializare JSON

  5. Utilizare cu async/await și feedback în UI

🧪 Exemplu: Consumul unui API public de postări

Vom folosi JSONPlaceholder pentru a obține o listă de postări.

📁 Model: Post.cs

public class Post
{
    public int UserId { get; set; }
    public int Id { get; set; }
    public string Title { get; set; } = string.Empty;
    public string Body { get; set; } = string.Empty;
}

🧩 Serviciu: PostService.cs

public class PostService
{
    private readonly HttpClient _http;

    public PostService(HttpClient http)
    {
        _http = http;
    }

    public async Task<List<Post>> GetPostsAsync()
    {
        try
        {
            var response = await _http.GetAsync("https://jsonplaceholder.typicode.com/posts");
            response.EnsureSuccessStatusCode();
            var json = await response.Content.ReadAsStringAsync();
            return JsonSerializer.Deserialize<List<Post>>(json) ?? new();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Eroare API: {ex.Message}");
            return new();
        }
    }
}

🧱 Înregistrare în Program.cs

builder.Services.AddScoped<PostService>();

🖥️ Componentă Blazor: Posts.razor

@page "/posts"
@inject PostService PostService

<h3>Lista de Postări</h3>

@if (posts is null)
{
    <p>Se încarcă...</p>
}
else
{
    <ul>
        @foreach (var post in posts)
        {
            <li><strong>@post.Title</strong>: @post.Body</li>
        }
    </ul>
}

@code {
    private List<Post>? posts;

    protected override async Task OnInitializedAsync()
    {
        posts = await PostService.GetPostsAsync();
    }
}

🧠 Best Practices

  • Folosește servicii dedicate pentru apeluri HTTP

  • Gestionează erorile API cu try/catch și mesaje informative

  • Nu uita de HttpClientFactory în aplicațiile Blazor Server sau .NET MAUI

  • Pentru POST/PUT, folosește JsonContent.Create() începând cu .NET 8

Vrei să comunici cu un API propriu? Poți începe de aici și apoi integra cu backend-ul tău ASP.NET Core.

Scrie un comentariu

Adresa de mail nu va fi publicata. Campurile obligatorii sunt marcate cu *