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