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.

🤖 Întreabă AI despre acest articol

AI Răspuns generat de AI pe baza acestui articol.
AI scrie răspunsul…

Scrie un comentariu

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