如何在 Blazor 中的 API 呼叫期間顯示載入指示器？

在Blazor 中進行API 呼叫期間顯示載入指示器

在Blazor 中進行可能需要一些時間的API 呼叫時，向以下人員提供回饋非常重要使用者。常用的指示器是等待遊標或旋轉影像。要在 Blazor 中實現此目的，可以使用多種選項。

選項1：使用Task.Delay(1)

此方法涉及使用非同步任務並呼叫wait Task .延遲(1);或等待Task.Yield( );每次使用者介面更新後。這會刷新更改並允許顯示微調器。

選項2：使用Task.Run() （不適用於WebAssembly）

此選項涉及建立一個長-使用Task.Run(()=> LongOperation ()); 在任務中運行操作。這可以防止主執行緒在操作執行時被阻塞。

Spinner 對伺服器端預先渲染的影響

在Blazor Server 應用程式中，頁面是預先渲染的，除非在OnAfterRenderAsync 中執行長操作，否則微調器將不可見。使用此生命週期方法而不是 OnInitializedAsync 可確保伺服器端渲染不會延遲。

範例程式碼

// Don't do this
//protected override async Task OnInitializedAsync()
//{
//    await LongOperation();
//}

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

其他資源

• [BlazorPro.Spinkit]https(://Spinkit] github.com/EdCharbeneau/BlazorPro.Spinkit)提供了一個包含用於建立旋轉器的範例程式碼的庫。

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