如何在 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中文網其他相關文章！