Blazor 怎么在组件初始化时加载数据

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) {     
Loading...
 } else if (Products != null) {     @foreach (var p in Products)     {         
@p.Name
     } } else {     
Error loading data.
 }  @code {     private List Products { get; set; }     private bool IsLoading { get; set; } = true;      protected override async Task OnInitializedAsync()     {         try         {             Products = await Http.GetFromjsonasync>("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();
• 组件内用 @inject IProductService ProductService 注入
• 若服务本身含异步初始化逻辑（如认证令牌准备），可在 OnInitializedAsync 中先 await 其就绪

首次加载后缓存数据（可选优化）

如果组件可能被反复导航进入（如路由复用），而数据不常变，可加简单缓存防止重复请求：

• 用私有字段标记是否已加载过：private bool _loaded;
• 在 OnInitializedAsync 开头加判断：if (_loaded) return;，加载完设为 true
• 更严谨场景可用 MemoryCache 或状态管理库（如 Fluxor）统一管理

基本上就这些。核心就是找准生命周期钩子，用对异步方式，兼顾 UX 和健壮性。