Blazor Server App：优化重复API调用，解决反序列化类型问题

核心思路是用泛型方法把重复的API请求逻辑封装起来，只需要传入API地址和目标对象类型，就能自动完成请求和反序列化，彻底消除重复代码。

步骤1：创建通用API服务类 #

在你的项目里新建一个ApiService类（可以放在Services文件夹下），把所有API请求的通用逻辑都写在这里：

using System.Net.Http.Json;

public class ApiService
{
    private readonly HttpClient _httpClient;

    // 自动注入HttpClient，Blazor会帮你处理
    public ApiService(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    // 泛型方法：T就是你要把JSON转成的对象类型
    public async Task<T?> GetAsync<T>(string apiUrl)
    {
        try
        {
            // 直接调用官方方法，自动完成请求和反序列化，不会有转义引号问题
            return await _httpClient.GetFromJsonAsync<T>(apiUrl);
        }
        catch (Exception ex)
        {
            // 简单异常处理，非专业开发者可以先这么用
            Console.WriteLine($"API请求失败：{ex.Message}");
            return default;
        }
    }

    // 如果需要POST请求，也可以加一个泛型方法，示例如下：
    public async Task<TOutput?> PostAsync<TInput, TOutput>(string apiUrl, TInput inputData)
    {
        try
        {
            var response = await _httpClient.PostAsJsonAsync(apiUrl, inputData);
            response.EnsureSuccessStatusCode(); // 确保请求成功
            return await response.Content.ReadFromJsonAsync<TOutput>();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"POST请求失败：{ex.Message}");
            return default;
        }
    }
}

步骤2：注册服务 #

打开Program.cs，把刚才创建的ApiService和HttpClient注册到Blazor的服务容器里，这样组件就能用了：

var builder = WebApplication.CreateBuilder(args);

// 添加Razor组件服务
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// 注册ApiService
builder.Services.AddScoped<ApiService>();

// 注册HttpClient，替换成你的API基础地址
builder.Services.AddScoped(sp => new HttpClient 
{ 
    BaseAddress = new Uri("https://你的API域名/") 
});

var app = builder.Build();

// ... 其他代码不变

步骤3：在组件里使用服务 #

在需要调用API的Blazor组件里，注入ApiService，然后直接调用泛型方法，指定目标对象类型和API路径即可：

@inject ApiService ApiService
@using 你的项目名.Models; // 替换成你存放实体类的命名空间

<h3>用户列表</h3>
@if (userList != null)
{
    foreach (var user in userList)
    {
        <p>ID: @user.Id，姓名: @user.Name</p>
    }
}

<h3>商品详情</h3>
@if (product != null)
{
    <p>商品名: @product.Title，价格: @product.Price</p>
}

@code {
    private List<User>? userList;
    private Product? product;

    protected override async Task OnInitializedAsync()
    {
        // 调用GetAsync，指定要转成List<User>类型，传入API相对路径
        userList = await ApiService.GetAsync<List<User>>("api/users");
        
        // 另一个请求，指定转成Product类型
        product = await ApiService.GetAsync<Product>("api/products/123");
    }

    // 示例实体类，根据你的API返回结构修改
    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
    }

    public class Product
    {
        public int Id { get; set; }
        public string Title { get; set; } = string.Empty;
        public decimal Price { get; set; }
    }
}

为什么这个方案管用？ #

• 消除重复代码：所有请求逻辑都集中在ApiService里，不管调用多少次API，只需要一行代码。
• 自动反序列化：用官方的GetFromJsonAsync方法，直接把API返回的JSON转成你需要的对象，不会出现转义引号的问题。
• 易维护：以后要改请求逻辑（比如加认证头、超时设置），只需要修改ApiService，不用改所有组件。

内容的提问来源于stack exchange，提问作者SkinnyPete63