Wie zeige ich einen Ladeindikator während API-Aufrufen in Blazor an?

Ladeanzeige während API-Aufrufen in Blazor anzeigen

Bei API-Aufrufen, die in Blazor einige Zeit dauern können, ist es wichtig, Feedback zu geben der Benutzer. Häufig verwendete Indikatoren sind ein Wartecursor oder ein Spinnerbild. Um dies in Blazor zu erreichen, stehen mehrere Optionen zur Verfügung.

Option 1: Verwendung von Task.Delay(1)

Diese Methode beinhaltet die Verwendung einer asynchronen Aufgabe und den Aufruf von „await Task“. .Verzögerung(1); oder warten Sie auf Task.Yield(); nach jedem UI-Update. Dadurch werden Änderungen gelöscht und die Anzeige des Spinners ermöglicht.

Option 2: Verwenden von Task.Run() (Nicht für WebAssembly)

Diese Option beinhaltet das Erstellen eines langen Ausführen einer Operation in einer Aufgabe mit Task.Run(()=> LongOperation());. Dadurch wird verhindert, dass der Hauptthread blockiert wird, während der Vorgang ausgeführt wird.

Auswirkung von Spinner auf das serverseitige Vorrendern

In Blazor Server-Apps, in denen Seiten vorgerendert werden , ist der Spinner nicht sichtbar, es sei denn, der lange Vorgang wird in OnAfterRenderAsync ausgeführt. Durch die Verwendung dieser Lebenszyklusmethode anstelle von OnInitializedAsync wird sichergestellt, dass das serverseitige Rendering nicht verzögert wird.

Beispielcode

// 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();
    }
}

Zusätzlich Ressourcen

• [BlazorPro.Spinkit](https://github.com/EdCharbeneau/BlazorPro.Spinkit) bietet eine Bibliothek mit Beispielcode zum Erstellen von Spinnern.

Das obige ist der detaillierte Inhalt vonWie zeige ich einen Ladeindikator während API-Aufrufen in Blazor an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!