API 与 EF 的 Blazor 加载动画答案

【问题标题】：Blazor loading animation for API vs. EFAPI 与 EF 的 Blazor 加载动画
【发布时间】：2020-09-26 14:07:58
【问题描述】：

我有一个服务器端 blazor 应用程序，我正在使用本教程为所有 API 调用实现加载动画 -- Display spinner on each API call automatically in Blazor

这很好用。每次点击调用 API 的按钮都会显示加载动画。但是，当我将 API 调用切换到使用 EF 进行 db 更改的类库时，加载动画不会出现。

好吧，我应该重新措辞。加载动画仅显示在初始页面加载中，而不是随后的按钮单击中。下面是类库函数：

    public async Task<List<LetterInfo>> ActiveLetters(int id)
    {
        _loader.Show();
        Thread.Sleep(5000);
        var letters = await _dbRO.Letters.Include(x => x.Student).Where(x => x.VolunteerId == id)
            .OrderBy(x => x.DateAdded).ToListAsync();
        _loader.Hide();
        return _mapper.Map<List<LetterInfo>>(letters);
    }

这个功能没什么特别的。 _loader 变量是 SpinnerService 的 DI：

public class SpinnerService
{
    public event Action OnShow;
    public event Action OnHide;

    public void Show()
    {
        OnShow?.Invoke();
    }

    public void Hide()
    {
        OnHide?.Invoke();
    }
}

这是页面：

private List<LetterInfo> _letters;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _letters = await _vs.VolunteerService.ActiveLetters(104);
        StateHasChanged();
    }
}

private async Task ButtonClick()
{
    _letters = await _vs.VolunteerService.ActiveLetters(110);
}

如您所见，在 AfterRender 生命周期中，我调用了该函数。这个动画效果很好。而且我在页面上还有一个按钮触发 ButtonClick()，它调用相同的 DB 函数。但是，在此调用中，没有显示加载动画。

我需要做什么才能让它工作？谢谢！

【问题讨论】：

标签： async-await blazor blazor-server-side

【解决方案1】：

我不确定为什么它第一次工作但 Sleep() 会阻塞主线程，因此需要更新渲染。

//Thread.Sleep(5000);
await Task.Delay(5000);

【讨论】：

天哪！我添加了它来减慢功能，这样我就不会错过动画......我的错。现在工作。哇，我的错。
TL;DR 永远不要在异步方法中使用 Thread.Sleep，除非你有充分的理由。 Async/await 告诉系统它可以将该线程用于其他事情。 Thread.Sleep 冻结线程，它不能用于其他事情。 Async/await 没有做出任何关于多线程的承诺，因此您可能会在同一个线程上运行来自许多方法的一堆任务，并且当您使用 Thread.Sleep 时，您会对所有这些任务大喊“停止” .是的，我过于简单化了 ;) 但可能你只是在第一次加载时没有那么多任务，所以它起作用了。