調用異步方法時 UI 線程被阻塞 (Blazor WASM PWA)

Question

誰能幫我理解為什么下面的代碼阻塞了 UI 線程......

I've modified the sample application from https://github.com/TrevorDArcyEvans/BlazorSQLiteWasm in order to test the performance of the SQLite database inside a Blazor WebAssembly Progressive Web Application

在 a.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。 我在這里錯過了什么嗎？

Answer 1

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

這將在構建后給您一個警告。 只需使用onclick="CreateMany"

我在這里錯過了什么嗎？

使用async Task CreateMany()...會更好...但這不是必需的。

主要問題是 SQlite 是完全同步的。 await db.SaveChangesAsync(); 是一個謊言，它根本不是異步的。

因此，您的代碼可能會在不同的數據庫中按預期工作，但 Wasm 提供的功能並不多。

Task.Run()也沒有效果，唉，你被這個困住了。