如何在 Blazor API 调用过程中有效显示加载指示器？

如何在 Blazor 中的 API 调用期间显示等待光标或旋转器

问题：
长-在 Blazor 应用程序中运行 API 调用需要一种向用户提供视觉反馈的方法，例如等待光标或加载微调器。但是，使用 CSS 手动切换这些状态可能无法及时刷新页面。

解决方案 1：使用 Task.Delay(1)

• 创建异步方法来执行长时间运行的操作。
• 在异步方法中，使用await Task.Delay(1) 或await Task.Yield() 刷新更改。

private async Task AsyncLongFunc()
{
    spinning = true;
    await Task.Delay(1); // flush changes
    LongFunc(); // non-async code
    currentCount++;
    spinning = false;
    await Task.Delay(1); // flush changes again
}

解决方案 2：使用 Task.Run() （不适用于 WebAssembly）

• 将长时间运行的操作包装在一个Task中。
• 使用await Task.Run()来执行

async Task AsyncLongOperation()
{
    spinning = true;
    await Task.Run(() => LongOperation());
    currentCount++;
    spinning = false;
}

服务器端预渲染的注意事项：

• 微调器不会在预渲染中显示渲染的 Blazor Server 应用程序。
• 要显示微调器，请在OnAfterRenderAsync 生命周期方法。

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

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