如何在 Blazor 中长时间运行的 API 调用期间显示微调器？

在 Blazor 中的 API 调用期间显示等待或微调器

Blazor 使您能够在长时间运行的 API 调用期间使用等待光标或微调器图像等视觉提示向用户显示反馈。

问题：

在您的 Blazor 应用程序中，您尝试使用 CSS 来显示API 调用期间旋转的光标。但是，直到调用完成，页面内容才刷新。

解决方案：

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

• 创建异步方法。
• 使用await Task.Delay(1) 或await任务.Yield();强制 UI 在 API 调用完成之前更新。

private async Task AsyncLongFunc()    // this is an async task
{
    spinning=true;
    await Task.Delay(1);      // flushing changes. The trick!!
    LongFunc();               // non-async code
    currentCount++;
    spinning=false;
    await Task.Delay(1);      // changes are flushed again    
}

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

• 如果您的 LongOperation() 方法不是异步的，请将其包含在任务中并使用等待它Task.Run().

async Task AsyncLongOperation()    // this is an async task
{
    spinning=true;
    await Task.Run(()=> LongOperation());  //<--here!
    currentCount++;
    spinning=false;
}

效果

服务端预渲染注意事项：

在 Blazor Server 应用程序中，由于预渲染，微调器不会出现。要使其可见，请在 OnAfterRender 中执行长操作。

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

有关更多示例和信息，请参阅 BlazorPro.Spinkit 等开源项目。

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