Blazor中创建和注入API Service的核心是定义接口与实现类封装http调用,通过DI注册(WebAssembly用Singleton、Server用Scoped),并在OnInitializedAsync中异步调用;需注意HttpClient配置、CORS、生命周期匹配及错误处理。

在 Blazor 中创建和注入 API Service 的核心是:定义服务类封装 HTTP 调用,通过依赖注入(DI)注册到服务容器,并在组件中按需使用。关键在于区分服务生命周期、正确处理异步、适配 Blazor Server 与 WebAssembly 的差异。
定义 API Service 类
新建一个 C# 类(如 WeatherForecastService.cs),继承 IWeatherForecastService 接口(推荐,利于测试和解耦)。内部使用 IHttpClientFactory 或直接注入 HttpClient(WebAssembly 下需注意配置)。
示例:
public interface IWeatherForecastService<br>{<br> Task<WeatherForecast[]> GetForecastAsync(DateTime startDate);<br>}<br><br>public class WeatherForecastService : IWeatherForecastService<br>{<br> private readonly HttpClient _httpClient;<br><br> public WeatherForecastService(HttpClient httpClient)<br> {<br> _httpClient = httpClient;<br> _httpClient.BaseAddress = new Uri("https://localhost:5001/"); // WebAssembly 需确保跨域或代理<br> }<br><br> public async Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)<br> {<br> return await _httpClient.GetFromjsonasync<WeatherForecast[]>($"WeatherForecast?startDate={startDate:O}");<br> }<br>}
在 Program.cs 中注册服务
Blazor 从 .net 6 起统一使用 Program.cs 配置 DI 容器。根据部署模型选择注册方式:
- Blazor WebAssembly(托管或独立):注册为 Singleton,并配置 HttpClient 的基础地址和默认请求头
- Blazor Server:通常注册为 Scoped(配合 SignalR 生命周期),也可用 Singleton
示例(WebAssembly):
builder.Services.AddHttpClient<IWeatherForecastService, WeatherForecastService>(<br> client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress));<br>// 或手动注册(更灵活)<br>builder.Services.AddSingleton<IWeatherForecastService, WeatherForecastService>();<br>builder.Services.AddScoped(sp => new HttpClient<br>{<br> BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)<br>});
在组件中注入并调用
使用 @inject 指令或构造函数注入。注意 Blazor 组件生命周期中,异步初始化需放在 OnInitializedAsync 中,避免在构造函数中执行异步操作。
ZipMarket程序仿自Envato旗下网站,对于想创建数字内容/素材交易平台的站长来说,ZipMarket是一个十分独特和极具创新的解决方案,用户在你的网站注册并购买或出售数字内容/素材作品时,你可以获得佣金;用户推广用户到你的网站购买或出售数字内容/素材时,引入用户的用户也可以获得佣金。实际上,ZipMarket是一套完美的数字内容类自由职业生态系统,功能不仅限于素材交易,除了模板/主题、文
0 示例(.razor 文件):
@page "/forecast"<br>@using Myapp.Services<br>@inject IWeatherForecastService ForecastService<br><br><h3>Weather Forecast</h3><br><br>@if (forecasts == null)<br>{<br> <p><em>Loading...</em></p><br>}<br>else<br>{<br> <table class="table"><br> <thead><tr><th>Date</th><th>Temp. (C)</th><th>Summary</th></tr></thead><br> <tbody><br> @foreach (var forecast in forecasts)<br> {<br> <tr><td>@forecast.Date.ToShortDateString()</td><td>@forecast.TemperatureC</td><td>@forecast.Summary</td></tr><br> }<br> </tbody><br> </table><br>}<br><br>@code {<br> private WeatherForecast[]? forecasts;<br><br> protected override async Task OnInitializedAsync()<br> {<br> forecasts = await ForecastService.GetForecastAsync(DateTime.Now);<br> }<br>}
处理常见问题
实际开发中容易遇到以下情况:
- CORS 报错(WebAssembly):后端需启用跨域,或使用 dev-server 代理(
proxy.conf.js或 .NET 6+ 的appsettings.Development.json代理配置) - HttpClient 实例复用问题:不要在服务中 new HttpClient;优先用 IHttpClientFactory 或由 DI 提供的实例
- 认证与 Token 注入:可扩展 DelegatingHandler(如
AuthorizationMessageHandler)自动附加 JWT - 错误统一处理:在 Service 方法内捕获 HttpRequestException,转换为业务异常或返回 Result 封装类型
基本上就这些。不复杂但容易忽略细节,比如生命周期匹配、HttpClient 配置位置、以及 WebAssembly 下的 BaseAddress 来源。保持接口抽象、合理注册、异步生命周期对齐,API 调用就能稳定工作。