Blazor 创建和注入 API Service 的方法

月夜之吻

发布时间：2025-12-14 12:54:08

526人浏览过

来源于php中文网

原创

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

blazor 创建和注入 api service 的方法

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

ZipMarket数字内容/素材交易网站

ZipMarket程序仿自Envato旗下网站，对于想创建数字内容/素材交易平台的站长来说，ZipMarket是一个十分独特和极具创新的解决方案，用户在你的网站注册并购买或出售数字内容/素材作品时，你可以获得佣金；用户推广用户到你的网站购买或出售数字内容/素材时，引入用户的用户也可以获得佣金。实际上，ZipMarket是一套完美的数字内容类自由职业生态系统，功能不仅限于素材交易，除了模板/主题、文

下载

示例（.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 封装类型

基本上就这些。不复杂但容易忽略细节，比如生命周期匹配、HttpClient 配置位置、以及 WebAssembly 下的 BaseAddress 来源。保持接口抽象、合理注册、异步生命周期对齐，API 调用就能稳定工作。

Blazorise 集成和配置教程

Blazor JS Interop 异步调用和回调处理

C# 如何在Blazor中调用JavaScript函数 - JS互操作(JS Interop)

Blazor C# 调用 JS 的详细方法 (JS Interop)

Blazor 怎么集成图表库 (Chart.js)

相关标签:

js json app 后端 ai proxy nas 跨域常见问题 c# .net json 封装构造函数 Token 继承接口 JS 异步 http

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：C# 信号量(Semaphore)的应用 - 控制对资源的并发访问数下一篇：C#如何操作Redis数据库 C# StackExchange.Redis使用教程

作者最新文章

一米等于多少cm 一米是100厘米吗

2026-01-14 16:42

雨课堂学生账号登录入口雨课堂网页版快速登陆

2026-01-14 16:50

小红书网页版登录入口官方网站PC端直达

2026-01-14 16:56

小红书电脑版扫码登录入口官方网页版在线使用

2026-01-14 16:59

皮皮喵漫画免费入口皮皮喵漫画免费在线阅读

2026-01-14 17:07

Edge浏览器大声朗读功能怎么用 Edge语音朗读网页文章技巧

2026-01-14 17:13

谷歌浏览器怎么导出书签为HTML文件 Chrome备份收藏夹教程

2026-01-14 17:51

谷歌浏览器记住密码在哪里查看 Chrome查看已保存密码步骤

2026-01-14 17:53

ps怎么用蒙版抠出半透明婚纱 ps半透明物体蒙版抠图技巧

2026-01-14 18:11

神庙逃亡网页版游戏入口随时随地想玩就玩

2026-01-14 19:11

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章，帮助大家解决问题。

411

2023.08.07

json是什么

JSON是一种轻量级的数据交换格式，具有简洁、易读、跨平台和语言的特点，JSON数据是通过键值对的方式进行组织，其中键是字符串，值可以是字符串、数值、布尔值、数组、对象或者null，在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容，供大家免费下载体验。

532

2023.08.23

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

309

2023.10.13

go语言处理json数据方法

本专题整合了go语言中处理json数据方法，阅读专题下面的文章了解更多详细内容。

2025.09.10

登录token无效

登录token无效解决方法：1、检查token的有效期限，如果token已经过期，需要重新获取一个新的token；2、检查token的签名，如果签名不正确，需要重新获取一个新的token；3、检查密钥的正确性，如果密钥不正确，需要重新获取一个新的token；4、使用HTTPS协议传输token，建议使用HTTPS协议进行传输；5、使用双因素认证，双因素认证可以提高账户的安全性。

6084

2023.09.14

登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容，供大家免费下载体验。

803

2023.09.14