Wie kann man Ladeindikatoren während Blazor-API-Aufrufen effektiv anzeigen?

So zeigen Sie einen Wartecursor oder Spinner während API-Aufrufen in Blazor an

Problem:
Lange- Das Ausführen von API-Aufrufen in Blazor-Apps erfordert eine Möglichkeit, Benutzern visuelles Feedback zu geben, z. B. einen Wartecursor oder einen Lade-Spinner. Das manuelle Umschalten dieser Zustände mithilfe von CSS führt jedoch möglicherweise nicht dazu, dass die Seite sofort aktualisiert wird.

Lösung 1: Verwenden von Task.Delay(1)

• Erstellen Sie eine asynchrone Methode zum Ausführen des lang andauernden Vorgangs.
• Verwenden Sie innerhalb der asynchronen Methode „await Task.Delay(1)“ oder „await“. Task.Yield() zum Löschen von Änderungen.

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
}

Lösung 2: Verwenden von Task.Run() (nicht für WebAssembly)

• Wickeln Sie den lang andauernden Vorgang in eine Aufgabe ein.
• Verwenden Sie „await Task.Run()“, um die Aufgabe in einer separaten Aufgabe auszuführen Thread.

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

Überlegungen zum serverseitigen Vor-Rendering:

• Spinner werden in vorab gerenderten Blazor Server-Apps nicht angezeigt.
• Um einen Spinner anzuzeigen, führen Sie den langen Vorgang im OnAfterRenderAsync-Lebenszyklus aus Methode.

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

Das obige ist der detaillierte Inhalt vonWie kann man Ladeindikatoren während Blazor-API-Aufrufen effektiv anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!