Blazor WebAssembly怎么调用API Blazor Wasm发起HTTP请求方法

Blazor WebAssembly 调用 API 推荐使用注入的 IHttpClientFactory 和命名 HttpClient，支持配置、拦截与生命周期管理；需配置 CORS、手动处理 Token 认证、错误响应及加载状态。

Blazor WebAssembly 调用 API 主要靠 IHttpClientFactory 和 HttpClient，推荐用注入的客户端发请求，安全、可配置、支持拦截和生命周期管理。

使用 HttpClient 服务发起 GET 请求

在 Program.cs 中已默认注册了命名客户端（如 "ServerAPI"），你只需在组件中注入并调用：

• 确保 Program.cs 里有类似 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 或更推荐的命名注册：builder.Services.AddHttpClient("ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress));
• 组件中用 @inject IHttpClientFactory HttpClientFactory，然后 var client = HttpClientFactory.CreateClient("ServerAPI");
• 调用 await client.GetFromJsonAsync<t>("api/values")</t>，自动反序列化，简洁安全

POST 请求传参与处理响应

提交数据常用 PostAsJsonAsync，后端接收需匹配模型结构：

• 定义请求体类，比如 public class LoginRequest { public string Username { get; set; } }
• 组件中： var response = await client.PostAsJsonAsync("api/auth/login", new LoginRequest { Username = "user" });
• 检查 response.IsSuccessStatusCode，再用 await response.Content.ReadFromJsonAsync<loginresult>()</loginresult> 解析结果
• 注意：WASM 运行在浏览器沙箱中，跨域需后端配 CORS，且不能绕过同源策略

错误处理与加载状态控制

真实场景中网络可能失败或延迟，别让 UI 卡住或静默出错：

标签： js json cookie 浏览器 session 后端 ai microsoft nas 跨域 sessionsto