调用异步方法时 UI 线程被阻塞 (Blazor WASM PWA)答案

【问题标题】：UI Thread blocked when calling an async method (Blazor WASM PWA)调用异步方法时 UI 线程被阻塞 (Blazor WASM PWA)
【发布时间】：2022-08-19 21:45:14
【问题描述】：

谁能帮我理解为什么下面的代码阻塞了 UI 线程......

我已从 https://github.com/TrevorDArcyEvans/BlazorSQLiteWasm 修改了示例应用程序，以测试 Blazor WebAssembly 渐进式 Web 应用程序中 SQLite 数据库的性能

在 .razor 文件上，我有以下内容

<button onclick=\"@(async () => CreateMany())\" class=\"btn btn-default btn-sm\">
   Insert Many
</button>

其中参考：

private async void CreateMany()
{
    var cars = new List<Car>();

    for (int i = 0; i < 1000; i++)
    {             
        cars.Add(new() { Brand = \"BMW\", Price = 500 });
    }

    var db = await _dbContextFactory.CreateDbContextAsync();
    await db.Cars.AddRangeAsync(cars);

    await db.SaveChangesAsync();

    _cars.Clear();
    _cars.AddRange(db.Cars);
    StateHasChanged();
}

当我单击“插入多个”按钮时，它似乎忽略了它是异步无效的事实，并且无论如何它都会阻止 UI。我在这里错过了什么吗？

我尝试添加 await Task.Delay(2000);作为 CreateMany() 方法中的第一行，这具有在执行数据库工作之前等待 2 秒的效果，UI 直到两秒后才会阻塞，因此 async/await 显然正在工作，也许有实体框架内的东西阻塞了线程......
现在网络上有后台工作人员，但它们不能用作 blazor 的线程。所以它阻塞 UI 线程的原因是没有其他线程可以使用。
复制。在发布之前搜索一下。 stackoverflow.com/questions/42982444/…
嗯，我现在实际上看到，似乎一些浏览器已经实现了多线程支持，但是 blazor 支持仍在进行中Real multithreading (on supported browsers) #17730
也许async Task，而不是void？

标签： c# asp.net-core entity-framework-core blazor-webassembly .net-6.0

【解决方案1】：

onclick="@(async () => CreateMany())"

这将在构建后给您一个警告。只需使用onclick="CreateMany"

我在这里错过了什么吗？

本来是更好的使用async Task CreateMany() ... 但这不是必需的。

主要问题是 SQlite 是完全同步的。 await db.SaveChangesAsync(); 是个谎言，它根本不是异步的。

因此，您的代码可能会在不同的数据库中按预期工作，但 Wasm 提供的功能并不多。

Task.Run() 也无效，唉，你被这个困住了。

【讨论】：