Blazor 创建和注入 API Service 的方法_技术教程

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
{
    Task GetForecastAsync(DateTime startDate);
}

public class WeatherForecastService : IWeatherForecastService
{
    private readonly HttpClient _httpClient;

    public WeatherForecastService(HttpClient httpClient)
    {
        _httpClient = httpClient;
        _httpClient.BaseAddress = new Uri("https://localhost:5001/"); // WebAssembly 需确保跨域或代理
    }

    public async Task GetForecastAsync(DateTime startDate)
    {
        return await _httpClient.GetFromJsonAsync($"WeatherForecast?startDate={startDate:O}");
    }
}

在 Program.cs 中注册服务

Blazor 从 .NET 6 起统一使用 Program.cs 配置 DI 容器。根据部署模型选择注册方式：

Blazor WebAssembly（托管或独立）：注册为 Singleton，并配置 HttpClient 的基础地址和默认请求头
Blazor Server：通常注册为 Scoped（配合 SignalR 生命周期），也可用 Singleton

示例（WebAssembly）：

builder.Services.AddHttpClient(
    client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress));
// 或手动注册（更灵活）
builder.Services.AddSingleton();
builder.Services.AddScoped(sp => new HttpClient
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});

在组件中注入并调用

使用 @inject 指令或构造函数注入。注意 Blazor 组件生命周期中，异步初始化需放在 OnInitializedAsync 中，避免在构造函数中执行异步操作。

示例（.razor 文件）：

@page "/forecast"
@using MyApp.Services
@inject IWeatherForecastService ForecastService

Weather Forecast


@if (forecasts == null)
{
    Loading...

}
else
{
    


            @foreach (var forecast in forecasts)
            {

            }

        Date Temp. (C) Summary
                        @forecast.Date.ToShortDateString() @forecast.TemperatureC @forecast.Summary
        
    

}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

Date	Temp. (C)	Summary
@forecast.Date.ToShortDateString()	@forecast.TemperatureC	@forecast.Summary

处理常见问题

实际开发中容易遇到以下情况：

CORS 报错（WebAssembly）：后端需启用跨域，或使用 dev-server 代理（proxy.conf.js 或 .NET 6+ 的 appsettings.Development.json 代理配置）
HttpClient 实例复用问题：不要在服务中 new HttpClient；优先用 IHttpClientFactory 或由 DI 提供的实例
认证与 Token 注入：可扩展 DelegatingHandler（如 AuthorizationMessageHandler）自动附加 JWT
错误统一处理：在 Service 方法内捕获 HttpRequestException，转换为业务异常或返回 Result 封装类型