Comment puis-je empêcher le blocage de l'interface utilisateur lors des appels d'API dans Blazor ?

Mises à jour non bloquantes de l'interface utilisateur lors des appels d'API dans Blazor

Lorsque vous effectuez des appels d'API dans une application Blazor, il est crucial de fournir des commentaires aux utilisateurs, indiquant qu'une action est en cours. Ceci peut être réalisé en affichant une flèche ou un curseur d'attente.

Option 1 : Utilisation de Task.Delay(1)

Cette méthode implique l'exécution d'une tâche asynchrone et l'inclusion de wait Task.Delay(1) en son sein. Cela permet d'effacer les modifications et de mettre à jour l'interface utilisateur avant le début de l'opération de longue durée.

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 : Utilisation de Task.Run() (pas pour WebAssembly)

Ceci Cette approche consiste à enfermer les opérations de longue durée dans une tâche, en veillant à ce qu'elle ne bloque pas le thread principal.

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

Effets et Limitations

Les deux méthodes affichent efficacement un spinner lors des appels d'API. Cependant, la double flèche peut ne pas apparaître si le pré-rendu côté serveur est activé dans les applications Blazor Server. Pour résoudre ce problème, les opérations longues doivent être gérées dans l'événement OnAfterRender.

Exemples de projets

Explorez le projet open source BlazorPro.Spinkit pour plus d'exemples et de techniques d'implémentation de spinners dans vos applications Blazor.

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!