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

来源：这里教程网时间：2026-02-21 17:38:41 作者：

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="/ai/2389" title="MedPeer"><img
                                                                                src="https://www.herecours.com/d/file/efpub/2026/21-21/20260221140340179521.jpg" alt="MedPeer"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/2389" title="MedPeer">MedPeer</a>
                                                                        <p>AI驱动的一站式科研服务平台</p>
                                                                </div>
                                                                <a href="/ai/2389" title="MedPeer" 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>();</iproductservice>
组件内用
@inject IProductService ProductService
注入若服务本身含异步初始化逻辑（如认证令牌准备），可在
OnInitializedAsync
中先 await 其就绪