Wie kann ich Benutzerfeedback während lang andauernder API-Aufrufe in Blazor dynamisch anzeigen?

Dynamisches Anzeigen von Benutzerfeedback während API-Aufrufen in Blazor

In Blazor erfordert die Verarbeitung lang laufender API-Aufrufe die Bereitstellung von Feedback für Benutzer, z Anzeige eines Wartecursors oder eines „Spinner“-Bildes. In diesem Artikel werden zwei Ansätze vorgestellt, um dies zu erreichen:

Option 1: Verwenden von Task.Delay(1)

• Erstellen Sie eine asynchrone Methode.
• Verwenden Sieawait Task.Delay(1); oder warten Sie auf Task.Yield(); um Änderungen zu löschen.

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    
}

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

Erstellen Sie eine Aufgabe, die den langen Vorgang einschließt :

async Task AsyncLongOperation()    // this is an async task
{
    spinning=true;
    await Task.Run(()=> LongOperation());  //<--here!
    currentCount++;
    spinning=false;
}

Wirkung auf Vorab-Rendering

In Blazor Server-Apps wird der Spinner aufgrund des Vorab-Renderings möglicherweise nicht angezeigt. Um dieses Problem zu beheben, führen Sie den langen Vorgang in OnAfterRender anstelle von OnInitializedAsync aus.

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

Weitere Einblicke in effektive Spinner-Implementierungen finden Sie im Open-Source-Projekt BlazorPro.Spinkit.

Das obige ist der detaillierte Inhalt vonWie kann ich Benutzerfeedback während lang andauernder API-Aufrufe in Blazor dynamisch anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!