Wie kann ich das Blockieren der Benutzeroberfläche während API-Aufrufen in Blazor verhindern?

Nicht blockierende UI-Updates während API-Aufrufen in Blazor

Beim Durchführen von API-Aufrufen in einer Blazor-Anwendung ist es wichtig, den Benutzern Feedback zu geben, das darauf hinweist, dass eine Aktion ausgeführt wird im Gange. Dies kann durch die Anzeige eines Spinners oder eines Wartecursors erreicht werden.

Option 1: Verwendung von Task.Delay(1)

Diese Methode beinhaltet das Ausführen einer asynchronen Aufgabe und das Einschließen von „await Task.Delay(1)“ darin. Dadurch können Änderungen gelöscht und die Benutzeroberfläche aktualisiert werden, bevor der lang andauernde Vorgang beginnt.

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
}

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

Dies Bei diesem Ansatz werden lang laufende Vorgänge in eine Aufgabe eingeschlossen, um sicherzustellen, dass sie den Hauptthread nicht blockiert.

async Task AsyncLongOperation()
{
    spinning = true;
    await Task.Run(() => LongOperation()); // Enclose in a task
    currentCount++;
    spinning = false;
}

Effekte und Einschränkungen

Beide Methoden zeigen bei API-Aufrufen effektiv einen Spinner an. Der Spinner wird jedoch möglicherweise nicht angezeigt, wenn das serverseitige Vor-Rendering in Blazor Server-Apps aktiviert ist. Um dieses Problem zu beheben, sollten lange Vorgänge im OnAfterRender-Ereignis verarbeitet werden.

Beispielprojekte

Erkunden Sie das Open-Source-Projekt BlazorPro.Spinkit für weitere Beispiele und Techniken zum Implementieren von Spinnern in Ihren Blazor-Anwendungen.

Das obige ist der detaillierte Inhalt vonWie kann ich das Blockieren der Benutzeroberfläche während API-Aufrufen in Blazor verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!