Blazor 创建和注入 API Service 的方法

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

Blazor 创建和注入 API Service 的方法-第1张图片-佛山资讯网

在 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 中,避免在构造函数中执行异步操作。

标签: js json app 后端 ai proxy nas 跨域 常见问题 c# .net

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~