Blazor组件初始化时应使用OnInitializedAsync方法加载异步数据，支持await、避免重复调用，并配合IsLoading状态与try-catch处理加载中和错误场景。
Blazor 组件初始化时加载数据，核心是利用生命周期方法 OnInitializedAsync（推荐）或 OnInitialized，并在其中调用异步数据获取逻辑。关键点在于：UI 渲染前触发、支持 await、避免重复加载、处理加载状态和错误。
用 OnInitializedAsync 加载异步数据
这是最常用且推荐的方式，适合调用 HTTP 请求、数据库查询等异步操作。
- 重写 OnInitializedAsync，在里面 await 数据加载任务
- 加载期间可设置 IsLoading = true，配合 UI 显示加载中状态（如 spinner）
- 数据加载完成后赋值给字段/属性，Blazor 会自动触发重新渲染
- 务必用 try-catch 处理异常，避免组件初始化失败导致白屏
示例：
@page "/products"
@inject HttpClient Http
@if (IsLoading)
{
<p>Loading...</p>
}
else if (Products != null)
{
@foreach (var p in Products)
{
<div>@p.Name</div>
}
}
else
{
<p>Error loading data.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4567" title="Comprehensive Three.js 3D graphics reference"><img
src="https://img.php.cn/upload/skill/000/000/081/179012895030480.jpg" alt="Comprehensive Three.js 3D graphics reference" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4567" title="Comprehensive Three.js 3D graphics reference">Comprehensive Three.js 3D graphics reference</a>
<p>详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。</p>
</div>
<a href="/xiazai/skill4567" title="Comprehensive Three.js 3D graphics reference" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
}
@code {
private List<Product> Products { get; set; }
private bool IsLoading { get; set; } = true;
protected override async Task OnInitializedAsync()
{
try
{
Products = await Http.GetFromJsonAsync<List<Product>>("api/products");
}
catch (Exception ex)
{
// 记录日志或设置错误状态
Console.WriteLine($"Load failed: {ex.Message}");
}
finally
{
IsLoading = false;
}
}
}
避免在 OnParametersSet 或 OnAfterRender 中重复加载
这两个方法会在组件多次渲染时反复执行，不适合放初始化数据逻辑：
- OnParametersSet：参数变更时触发，可能多次调用
- OnAfterRender：每次渲染后都执行，滥用会导致无限循环或性能问题
- 除非有明确需要「响应参数变化重新加载」，否则初始化数据只应在 OnInitializedAsync 中做一次
服务注入与依赖管理
确保所需服务（如 HttpClient、自定义仓储类）已正确注册到 DI 容器：
- 在
Program.cs（.NET 6+）中用builder.Services.AddScoped<IProductService, ProductService>(); - 组件内用
@inject IProductService ProductService注入 - 若服务本身含异步初始化逻辑（如认证令牌准备），可在
OnInitializedAsync中先 await 其就绪
首次加载后缓存数据（可选优化）
如果组件可能被反复导航进入（如路由复用），而数据不常变，可加简单缓存防止重复请求：
- 用私有字段标记是否已加载过：
private bool _loaded; - 在
OnInitializedAsync开头加判断：if (_loaded) return;，加载完设为true - 更严谨场景可用
MemoryCache或状态管理库（如 Fluxor）统一管理
基本上就这些。核心就是找准生命周期钩子，用对异步方式，兼顾 UX 和健壮性。
