HttpClient og API-kald

Læringsmål

• Mappe CRUD til HTTP-metoder mod REST API.
• Bruge GetFromJsonAsync, PostAsJsonAsync med DTO/records.
• Håndtere HttpRequestException, statuskoder og tomme svar.
• Registrere typed HttpClient i Program.cs (se DI-lektion).

Hvornår bruger I det? Når UI skal vise data uden for jeres egen database — Pokémon-lister, LoL-champions, Rick and Morty-episoder. HttpClient er broen mellem Blazor-state og OpgaverAPI; DI-lektionen viser hvor I registrerer klienten.

CRUD over HTTP: POST create, GET read, PUT/PATCH update, DELETE delete. I Blazor er kaldene async — UI-tråden blokeres ikke mens I venter på Pokémon-JSON.

# Vælg scenarie og tryk Afspil

@page "/pokemon"
@inject HttpClient Http

<button @onclick="Load" disabled="@loading">Hent Pokémon</button>
@if (loading) { <p>Henter…</p> }
@if (error is not null) { <p class="err">@error</p> }
@if (items is not null)
{
  <ul>@foreach (var p in items) { <li>@p.Name</li> }</ul>
}

@code {
  List<PokeDto>? items;
  bool loading;
  string? error;

  async Task Load()
  {
    loading = true;
    error = null;
    try
    {
      items = await Http.GetFromJsonAsync<List<PokeDto>>("/go/pokemon?limit=20");
    }
    catch (HttpRequestException ex)
    {
      error = $"API fejl: {ex.StatusCode}";
    }
    finally { loading = false; }
  }

  public record PokeDto(string Name, int Id);
}

DTO og JSON-shape

Property-navne skal matche JSON (case-insensitive default). Brug [JsonPropertyName("id")] ved behov. Records er gode til read-only API-data.

public record ChampionDto(string Id, string Name);

// Explicit check
var response = await Http.GetAsync("/LeagueOfLegends/Champions");
if (!response.IsSuccessStatusCode)
{
    var body = await response.Content.ReadAsStringAsync();
    throw new InvalidOperationException($"{response.StatusCode}: {body}");
}
var champs = await response.Content.ReadFromJsonAsync<ChampionDto[]>();

Hvornår bruger I explicit ReadFromJsonAsync? Når I skal læse body ved fejl (ProblemDetails), logge rå JSON i DevTools, eller håndtere 204 No Content uden exception. GetFromJsonAsync er kortere til «happy path» GET — men kaster ved 4xx/5xx.

// OpgaverAPI returnerer camelCase — default JsonSerializer er case-insensitive
public record PokeDto(int Id, string Name);

// Hvis API skifter til snake_case, brug [JsonPropertyName] — ikke dynamic
[JsonPropertyName("champion_id")]
public string ChampionId { get; init; } = "";

X-Api-Key og headers

using var request = new HttpRequestMessage(HttpMethod.Get, "/LeagueOfLegends/Champions");
request.Headers.Add("X-Api-Key", apiKey);
var response = await Http.SendAsync(request);

Bedre: encapsuler i ILolService så komponenter ikke kender header-detaljer.

Hvornår hvilken header? X-Api-Key til personlig OpgaverAPI-nøgle (LoL m.fl.). Authorization: Bearer når jeres egen backend eller Mercantec Auth JWT skal med. Pokémon-endpoints uden nøgle: ingen header — men stadig Accept: application/json via factory.

1. Hent nøgle efter login på kataloget — gem i sessionStorage.
2. ILolService læser nøgle via IApiKeyStore og sætter header på hvert kald.
3. Ved 401: vis «Log ind og opret nøgle» — ikke raw exception i UI.

Typed client

builder.Services.AddHttpClient<IPokemonApi, PokemonApi>(c =>
    c.BaseAddress = new Uri("https://api-opgaver.mercantec.tech"));

Hvornår typed client frem for rå HttpClient i komponent? Så snart I har mere end ét endpoint (liste + detail + søgning). Pokémon-demo med kun GET kan starte med @inject HttpClient; LoL med nøgle og flere routes bør have ILolService registreret i Program.cs.

ProblemDetails og statuskoder

Hvorfor det betyder noget: OpgaverAPI svarer med meningsfulde statuskoder — 401 (manglende nøgle), 404 (forkert route), 503 (nedetid). Brugeren og censor skal se en handlingsbar besked, ikke en hvid skærm.

public async Task<(List<Mon>? Data, string? Error)> GetPokemonAsync(CancellationToken ct)
{
    using var response = await _http.GetAsync("/go/pokemon?limit=20", ct);
    if (response.IsSuccessStatusCode)
        return (await response.Content.ReadFromJsonAsync<List<Mon>>(ct), null);

    ProblemDetails? problem = null;
    try { problem = await response.Content.ReadFromJsonAsync<ProblemDetails>(ct); }
    catch { /* body var ikke JSON */ }

    var title = problem?.Title ?? response.ReasonPhrase ?? "Ukendt fejl";
    return (null, $"{(int)response.StatusCode}: {title}");
}

I UI: vis Error i rød tekst og tilbyd «Prøv igen» — særligt ved timeout på skolens WiFi.

Timeout og CancellationToken

builder.Services.AddHttpClient<IPokemonService, PokemonService>(c =>
{
    c.BaseAddress = new Uri(apiBase);
    c.Timeout = TimeSpan.FromSeconds(15);
});

// I komponent — send token videre fra livscyklus
mons = await Api.GetPokemonAsync(cancellationToken);

Fang TaskCanceledException når brugeren navigerer væk eller netværket dør — skeln mellem timeout og bruger-cancel.

catch (TaskCanceledException ex) when (!ct.IsCancellationRequested)
{
    error = "OpgaverAPI svarede ikke i tide — prøv igen.";
}
catch (OperationCanceledException)
{
    return; // bruger forlod siden — vis ikke fejl
}

Hvornår sende CancellationToken? Altid videre fra OnParametersSetAsync / OnInitializedAsync til service-metoder — især ved LoL-detail når brugeren klikker hurtigt gennem champion-listen.

Baseret på MAGS Blazor-wiki og Microsoft Learn — Blazor.