Comment afficher efficacement les indicateurs de chargement lors des appels d'API Blazor ?

Comment afficher un curseur ou un fileur d'attente pendant les appels API dans Blazor

Problème :
Long- L'exécution d'appels API dans les applications Blazor nécessite un moyen de fournir un retour visuel aux utilisateurs, comme un curseur d'attente ou une flèche de chargement. Cependant, le fait de basculer manuellement ces états à l'aide de CSS peut ne pas actualiser la page rapidement.

Solution 1 : Utilisation de Task.Delay(1)

• Créer un fichier asynchrone méthode pour exécuter l'opération de longue durée.
• Dans la méthode asynchrone, utilisez wait Task.Delay(1) ou wait Task.Yield() pour effacer les modifications.

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
}

Solution 2 : Utilisation de Task.Run() (pas pour WebAssembly)

• Enveloppez l'opération de longue durée dans une tâche.
• Utilisez wait Task.Run() pour exécuter la tâche sur un autre thread.

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

Considérations relatives au pré-rendu côté serveur :

• Les spinners ne s'afficheront pas dans les applications Blazor Server pré-rendues.
• Pour afficher un spinner, effectuez l'opération longue dans le cycle de vie OnAfterRenderAsync méthode.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!