Wie zeige ich einen Spinner während lang andauernder API-Aufrufe in Blazor an?

Warten oder Spinner während API-Aufrufen in Blazor anzeigen

Blazor ermöglicht es Ihnen, dem Benutzer während lang andauernder API-Aufrufe Feedback anzuzeigen, indem Sie visuelle Hinweise wie Wartecursor oder Spinner-Bilder verwenden.

Problem:

In Ihrer Blazor-Anwendung haben Sie versucht, CSS zu verwenden, um einen sich drehenden Cursor anzuzeigen während API-Aufrufen. Der Seiteninhalt wurde jedoch erst aktualisiert, als der Aufruf abgeschlossen war.

Lösung:

Option 1: Task.Delay(1) verwenden

• Erstellen Sie eine asynchrone Methode.
• Verwenden Sie „await Task.Delay(1)“ oder „await“. Task.Yield(); um die Aktualisierung der Benutzeroberfläche zu erzwingen, bevor der API-Aufruf abgeschlossen ist.

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)

• Wenn Ihre LongOperation()-Methode nicht asynchron ist, schließen Sie sie in eine Aufgabe ein und warten Sie darauf, dass sie verwendet wird Task.Run().

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

Effekt

Hinweis für serverseitiges Prerendering:

In Blazor Server-Apps wird der Spinner aufgrund des Vorrenderns nicht angezeigt. Um es sichtbar zu machen, führen Sie den langen Vorgang in OnAfterRender aus.

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

Weitere Beispiele und Informationen finden Sie in Open-Source-Projekten wie BlazorPro.Spinkit.

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