如何在 Blazor API 呼叫過程中有效顯示載入指示器？

如何在Blazor 中的API 呼叫期間顯示等待遊標或旋轉器

問題：

問題：長

問題：
• 長-在Blazor 應用程式中運行API呼叫需要一種向使用者提供視覺回饋的方法，例如等待遊標或載入微調器。但是，使用 CSS 手動切換這些狀態可能無法及時刷新頁面。

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

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
}

建立非同步方法來執行長時間運作的操作。

在非同步方法中，使用await Task.Delay(1) 或await Task.Yield() 來刷新變更。

解決方案2：使用Task.Run() （不適用於WebAssembly）

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

將長時間運行的操作包裝在一個Task中。

使用await Task.Run()來執行

伺服器端預先渲染的注意事項：

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

微調器不會在預先渲染中顯示渲染的Blazor Server 應用程式。 要顯示微調器，請在OnAfterRenderAsync 生命週期方法。

以上是如何在 Blazor API 呼叫過程中有效顯示載入指示器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！