Blazor 使用 HttpClient 调用 Web API 教程

技术百科

幻夢星雲

发布时间：2025-12-31

浏览：次

Blazor中调用Web API需正确配置HttpClient服务、处理跨域、管理生命周期及错误；推荐使用命名或类型化客户端，通过IHttpClientFactory注入，结合GetFromJsonAsync/PostAsJsonAsync发送请求，并确保后端启用CORS。

Blazor 中使用 HttpClient 调用 Web API 是最常用的数据交互方式，关键在于正确配置服务、处理跨域、管理生命周期，并做好错误应对。

注册并注入 HttpClient 服务

Blazor WebAssembly 和 Blazor Server 的注册方式略有不同，但都推荐使用命名客户端（Named Client）或类型化客户端（Typed Client）来提升可维护性。

在 Program.cs（.NET 6+）中注册命名客户端：

builder.Services.AddHttpClient("MyApi", client =>
{
    client.BaseAddress = new Uri("https://api.example.com/");
    client.DefaultRequestHeaders.Accept.Add(
        new MediaTypeWithQualityHeaderValue("application/json"));
});

在组件中通过 [Inject] 获取：

@inject IHttpClientFactory HttpClientFactory

@code {
    private HttpClient _httpClient;
    protected override void OnInitialized()
    {
        _httpClient = HttpClientFactory.CreateClient("MyApi");
    }
}

更推荐直接注入 IHttpClientFactory 而非 HttpClient 实例，避免 DNS 变更或连接泄漏问题。

发送 GET 请求并解析 JSON

调用 REST API 获取数据时，通常用 GetFromJsonAsync() 方法，它自动反序列化响应体。

定义对应的数据模型（如 WeatherForecast.cs）
在组件中发起请求：

private List forecasts = new();
private bool isLoading = true;

protected override async Task OnInitializedAsync()
{
    try
    {
        forecasts = await _httpClient.GetFromJsonAsync>("weatherforecast");
    }
    catch (HttpRequestException ex)
    {
        // 处理 4xx/5xx 响应
        Console.WriteLine($"请求失败：{ex.Message}");
    }
    finally
    {
        isLoading = false;
    }
}

注意：确保 API 返回的 JSON 结构与 C# 类型完全匹配（字段名大小写、嵌套结构等），否则反序列化会静默失败或为 null。

处理 POST 请求与表单提交

向 API 提交数据常用 PostAsJsonAsync()，它自动设置 Content-Type: application/json 并序列化对象。

构造请求数据对象（如 NewTodo）
调用方法并检查响应状态码：

var newTodo = new NewTodo { Title = "买牛奶", IsCompleted = false };
var response = await _httpClient.PostAsJsonAsync("todos", newTodo);

if (response.IsSuccessStatusCode)
{
    var createdTodo = await response.Content.ReadFromJsonAsync();
    todos.Add(createdTodo);
}
else
{
    var error = await response.Content.ReadAsStringAsync();
    Console.WriteLine($"创建失败：{error}");
}

若需上传文件或混合表单数据，改用 MultipartFormDataContent 手动构建请求体。

跨域（CORS）与本地开发注意事项

Blazor WebAssembly 运行在浏览器沙箱中，受同源策略限制。调用非同源 API 必须由后端启用 CORS。

.NET Web API 示例（Program.cs）：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowBlazorApp", policy =>
    {
        policy.WithOrigins("https://localhost:5001") // Blazor WASM 默认地址
            .AllowAnyMethod()
            .AllowAnyHeader();
    });// ...
app.UseCors("AllowBlazorApp");

开发阶段也可用代理（如 dev-server proxy 或 ASP.NET Core 代理中间件）绕过浏览器 CORS 检查
Blazor Server 不受浏览器 CORS 限制（请求由服务器发出），但仍需注意后端网络可达性

基本上就这些 —— 配置好客户端、选对方法、处理好异常和跨域，调用 Web API 就很稳了。

# ai # 后端 # 表单 # 推荐使用 # 不受 # 而非 # 关键在于 # 浏览器 # app # 客户端 # js # json # dns # 对象 # c# # 序列化 # .net # NULL # 状态码 # 中间件 # 表单提交 # 跨域 # nas # rest api # 但仍 # 但都

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【精选文章<？ｍｕｍａ echo $count; ?> 】