Effectuer des opérations HTTP dans des applications web Blazor

  • 10 minutes

Dans cette unité, vous allez apprendre à utiliser le IHttpClientFactory pour gérer la création et la suppression du client HTTP, et à utiliser ce client pour effectuer des opérations REST dans une application web Blazor d’ASP.NET. Les exemples de code utilisés dans cette unité sont basés sur l’interaction avec une API qui permet de gérer une liste de fruits stockés dans une base de données. Les informations contenues dans cette unité sont basées sur l’utilisation de fichiers code-behind dans une application Razor.

Le code suivant représente le modèle de données référencé dans les exemples de code :

public class FruitModel
{
    // An id assigned by the database
    public int id { get; set; }
    // The name of the fruit
    public string? name { get; set; }
    // A boolean to indicate if the fruit is in stock
    public bool instock { get; set; }
}

Inscrire IHttpClientFactory dans votre application

Pour ajouter IHttpClientFactory à votre application, enregistrez AddHttpClient dans le fichier Program.cs. L’exemple de code suivant utilise le type de client nommé, puis définit l’adresse de base de l’API utilisée dans les opérations REST. Cet exemple de code est en outre référencé dans tout le reste de cette unité.

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// Add IHttpClientFactory to the container and set the name of the factory
// to "FruitAPI". The base address for API requests is also set.
builder.Services.AddHttpClient("FruitAPI", httpClient =>
{
    httpClient.BaseAddress = new Uri("http://localhost:5050/");
});

var app = builder.Build();

Identifier les exigences d’opération dans l’API

Avant d’effectuer des opérations avec une API, vous devez identifier les attentes de l’API :

  • Point de terminaison d’API : Identifiez le point de terminaison de l’opération afin de pouvoir ajuster correctement l’URI stocké dans l’adresse de base si nécessaire.
  • Exigences en matière de données : Identifiez si l’opération retourne/attend une énumération ou simplement une seule partie de données.

Remarque

Les exemples de code dans tout le reste de cette unité supposent que chaque opération HTTP est gérée sur une page distincte située dans la solution.

Effectuer une opération GET

Une opération GET ne doit pas envoyer de corps et sert (comme le nom de la méthode l’indique) à récupérer des données d’une ressource. Pour effectuer une opération HTTP GET avec HttpClient et un URI, utilisez la méthode HttpClient.GetAsync. Par exemple, si vous souhaitez créer une table sur la page d’accueil d’une application Razor Page (Home.razor) pour afficher les résultats d’une GET opération, vous devez ajouter ce qui suit au code-behind (Home.razor.cs) :

  • Utilisez l’injection de dépendance pour ajouter IHttpClientFactory au modèle de page.
  • Créer une instance de HttpClient
  • Effectuez l’opération GET, puis désérialisez les résultats dans votre modèle de données.

L’exemple de code suivant montre comment effectuer une opération GET. Veillez à lire les commentaires dans le code.

public partial class Home : ComponentBase
{
    // IHttpClientFactory set using dependency injection 
    [Inject]
    public required IHttpClientFactory HttpClientFactory { get; set; }

    [Inject]
    private NavigationManager? NavigationManager { get; set; }

    /* Add the data model, an array is expected as a response */
    private IEnumerable<FruitModel>? _fruitList;

    // Begin GET operation when the component is initialized
    protected override async Task OnInitializedAsync()
    {
        // Create the HTTP client using the FruitAPI named factory
        var httpClient = HttpClientFactory.CreateClient("FruitAPI");

        // Perform the GET request and store the response. The parameter
        // in GetAsync specifies the endpoint in the API 
        using HttpResponseMessage response = await httpClient.GetAsync("/fruits");

        // If the request is successful deserialize the results into the data model
        if (response.IsSuccessStatusCode)
        {
            using var contentStream = await response.Content.ReadAsStreamAsync();
            _fruitList = await JsonSerializer.DeserializeAsync<IEnumerable<FruitModel>>(contentStream);
        }
        else
        {
            // If the request is unsuccessful, log the error message
            Console.WriteLine($"Failed to load fruit list. Status code: {response.StatusCode}");
        }
    }
}

Effectuer une opération POST

Une opération POST doit envoyer un corps et sert à ajouter des données à une ressource. Pour effectuer une opération HTTP POST avec HttpClient et un URI, utilisez la méthode HttpClient.PostAsync. Si vous souhaitez utiliser un formulaire pour ajouter des éléments aux données de votre page d’accueil, vous devez :

  • Utilisez l’injection de dépendance pour ajouter IHttpClientFactory au modèle de page.
  • Lier les données au formulaire à l’aide du modèle EditForm ou EditContext.
  • Sérialisez les données que vous souhaitez ajouter à l’aide de la méthode JsonSerializer.Serialize.
  • Créer une instance de HttpClient
  • Effectuez l’opération POST.

Remarque

Après notre modèle de projet d’une page distincte pour chaque opération REST, l’opération POST est effectuée dans une page Add.razor avec l’exemple de code dans le fichier code-behind Add.razor.cs .

L’exemple de code suivant montre comment effectuer une opération POST. Veillez à lire les commentaires dans le code.

namespace FruitWebApp.Components.Pages;

public partial class Add : ComponentBase
{
    // IHttpClientFactory set using dependency injection 
    [Inject]
    public required IHttpClientFactory HttpClientFactory { get; set; }

    // NavigationManager set using dependency injection
    [Inject]
    private NavigationManager? NavigationManager { get; set; }

    // Add the data model and bind the form data to it
    [SupplyParameterFromForm]
    private FruitModel? _fruitList { get; set; }

    protected override void OnInitialized() => _fruitList ??= new();

    // Begin POST operation code
    private async Task Submit()
    {
        // Serialize the information to be added to the database
        var jsonContent = new StringContent(JsonSerializer.Serialize(_fruitList),
            Encoding.UTF8,
            "application/json");

        // Create the HTTP client using the FruitAPI named factory
        var httpClient = HttpClientFactory.CreateClient("FruitAPI");

        // Execute the POST request and store the response. The response will contain the new record's ID
        using HttpResponseMessage response = await httpClient.PostAsync("/fruits", jsonContent);

        // Check if the operation was successful, and navigate to the home page if it was
        if (response.IsSuccessStatusCode)
        {
            NavigationManager?.NavigateTo("/");
        }
        else
        {
            Console.WriteLine("Failed to add fruit. Status code: {response.StatusCode}");
        }
    }
}

Effectuer d’autres opérations REST

D’autres opérations telles que PUT et DELETE suivent le même modèle que celui indiqué précédemment. Le tableau suivant définit les opérations REST courantes avec la méthode HttpClient associée :

Requête Méthode Définition
GET HttpClient.GetAsync Récupère une ressource
PUBLIER HttpClient.PostAsync Crée une nouvelle ressource
PUT HttpClient.PutAsync Mises à jour une ressource existante ou crée une nouvelle ressource si elle n’existe pas
Supprimer HttpClient.DeleteAsync Supprime une ressource
PATCH HttpClient.PatchAsync Met à jour partiellement une ressource existante