如何在 Blazor 中的 API 调用期间显示加载指示器？

在 Blazor 中进行 API 调用期间显示加载指示器

在 Blazor 中进行可能需要一些时间的 API 调用时，向以下人员提供反馈非常重要用户。常用的指示器是等待光标或旋转图像。要在 Blazor 中实现此目的，可以使用多种选项。

选项 1：使用 Task.Delay(1)

此方法涉及使用异步任务并调用 wait Task .延迟(1);或等待 Task.Yield();每次用户界面更新后。这会刷新更改并允许显示微调器。

选项 2：使用 Task.Run() （不适用于 WebAssembly）

此选项涉及创建一个长-使用 Task.Run(()=> LongOperation()); 在任务中运行操作。这可以防止主线程在操作执行时被阻塞。

Spinner 对服务器端预渲染的影响

在 Blazor Server 应用中，页面是预渲染的，除非在 OnAfterRenderAsync 中执行长操作，否则微调器将不可见。使用此生命周期方法而不是 OnInitializedAsync 可确保服务器端渲染不会延迟。

示例代码

// Don't do this
//protected override async Task OnInitializedAsync()
//{
//    await LongOperation();
//}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {            
        await Task.Run(()=> LongOperation());//<--or Task.Delay(0) without Task.Run
        StateHasChanged();
    }
}

其他资源

• [BlazorPro.Spinkit](https://github.com/EdCharbeneau/BlazorPro.Spinkit) 提供了一个包含用于创建旋转器的示例代码的库。

以上是如何在 Blazor 中的 API 调用期间显示加载指示器？的详细内容。更多信息请关注PHP中文网其他相关文章！