如何在 Blazor 中的 API 调用期间防止 UI 阻塞？

Blazor 中 API 调用期间的非阻塞 UI 更新

在 Blazor 应用程序中进行 API 调用时，向用户提供反馈至关重要，表明某个操作正在执行进行中。这可以通过显示旋转器或等待光标来实现。

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

此方法涉及运行异步任务并包括等待 Task.Delay(1)在其中。这允许在长时间运行的操作开始之前刷新更改并更新 UI。

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

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

此方法涉及将长时间运行的操作封装在任务中，确保它不会阻塞主线程。

async Task AsyncLongOperation()
{
    spinning = true;
    await Task.Run(() => LongOperation()); // Enclose in a task
    currentCount++;
    spinning = false;
}

效果和限制

这两种方法都可以在 API 调用期间有效地显示旋转器。但是，如果在 Blazor 服务器应用中启用服务器端预渲染，则可能不会显示微调器。要解决此问题，应在 OnAfterRender 事件中处理长操作。

示例项目

探索开源项目 BlazorPro.Spinkit，了解在 Blazor 应用程序中实现旋转器的更多示例和技术。

以上是如何在 Blazor 中的 API 调用期间防止 UI 阻塞？的详细内容。更多信息请关注PHP中文网其他相关文章！