Blazor 注册并使用HttpClient服务

在Blazor应用中，HttpClient是一个非常重要的服务，它允许我们发送HTTP请求并接收响应。为了使用HttpClient，我们首先需要在应用的依赖注入容器中注册它，然后在组件中通过@inject指令将其注入到组件中。下面将详细介绍如何在Blazor 应用中注册并使用HttpClient服务。

在Program.cs文件中注册HttpClient服务。

builder.Services.AddHttpClient();

注册完HttpClient服务后，我们就可以在Blazor组件中使用了。
创建一个 HttpClientExample.razor 组件，注入并使用HttpClient来发送HTTP GET请求并显示响应内容。

@page "/fetchdata"

@inject HttpClient Http

<h1>Fetch Data Example</h1>

@if (Message == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <p>Message: @Message</p>
}

@code {
    private string Message{ get; set; }

    protected override async Task OnInitializedAsync()
    {
        var response = await Http.GetAsync("https://cn.bing.com/");
        if (response.IsSuccessStatusCode)
        {
            Message = await response.Content.ReadAsStringAsync();
        }
        else
        {
            Message = "获取数据失败";
        }
    }
}

在上面的代码中，我们首先通过@inject指令将HttpClient服务注入到组件中。然后，在OnInitializedAsync方法中，使用注入的Http对象发送一个GET请求到指定的URL。如果请求成功，我们读取响应内容并将其显示在页面上；如果请求失败，我们显示一个错误消息。

三、注意事项

确保Blazor 项目已经引用了必要的NuGet包，如Microsoft.AspNetCore.Components.WebAssembly和Microsoft.Extensions.Http。

如果请求需要跨域（CORS），确保目标服务器支持CORS，并在响应头中包含正确的CORS策略。

HttpClient实例在Blazor 应用中默认是作用域为组件的，这意味着每个组件都会获得一个独立的HttpClient实例。如果需要共享同一个HttpClient实例，可以考虑使用单例模式或其他依赖注入技术。

在处理HTTP响应时，注意处理可能的异常和错误情况，以确保应用的健壮性。

通过以上步骤，可以在Blazor 应用中轻松注册并使用HttpClient服务来发送HTTP请求并处理响应。这将为Blazor应用提供丰富的数据交互能力。

示例代码

HttpClientExample.razor