Blazor 预加载数据即使数据未完成

Question

有没有办法把处理过的数据实时展示给用户看？

我的意思是：假设这种情况：我创建了一个默认的 Blazor 应用程序来用作示例。 Go 到默认页面FetchData ，它使用如下 model ：

public class WeatherForecast
{
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
        public string? Summary { get; set; }
}

该页面默认使用此模拟服务：

public class WeatherForecastService
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    public Task<WeatherForecast[]> GetForecastAsync(DateOnly startDate)
    {
        return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = Summaries[Random.Shared.Next(Summaries.Length)]
            }).ToArray());
    }
}

这是使用该服务的页面：

@page "/fetchdata"
@using BlazorApp1.Data
@inject WeatherForecastService ForecastService

<PageTitle>Weather forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
    }
}

好的，现在假设服务不是使用 5 个项目，而是我们放置一个高数字，例如 2000000。

public Task<WeatherForecast[]> GetForecastAsync(DateOnly startDate)
{
    return Task.FromResult(Enumerable.Range(1, 20000000).Select(index => new WeatherForecast
                {
                    Date = startDate.AddDays(index),
                    TemperatureC = Random.Shared.Next(-20, 55),
                    Summary = Summaries[Random.Shared.Next(Summaries.Length)]
                }).ToArray());
}

当我们重新加载页面时，它不会呈现，直到加载所有天气预报。

实时呈现数据以向用户显示页面的最佳方式是什么，即使服务正在向后运行？

Answer 1

如果您希望在数据到达时立即接收数据的每个部分，而不是等待完整的数据可用，您可以使用AsAsyncEnumerable 。 您不希望在等待数据块时阻塞 CPU。 这是 IAsyncEnumerable 可以帮助您的地方。

您可以在查询中使用AsAsyncEnumerable以获得更好的性能，例如：

    public IAsyncEnumerable<WeatherForecast> GetForecastAsync()
    {
        return _context.WeathreForecasts                
            .AsAsyncEnumerable();
    }  

下面的照片显示了这一点：
通用异步方法（例如 .ToListAsync()）：

AsAsyncEnumerable 方法：

有关更多信息，您可以参考IAsyncEnumerable with yield in C#

Answer 2

在您的示例中，您需要快速处理非常大的数据集，最简单的方法是使用Virtualize组件。 这展示了处理列表的几个关键原则：

1. 只获取您实际需要的数据。
2. 将请求对象传递到数据管道并取回结果对象。
3. 在管道中使用IEnumerable以最大限度地减少具体化。

数据管道需要重组以更好地模拟真实世界的示例。

打破数据提供者。

public class WeatherForecastProvider
{
    private IEnumerable<WeatherForecast> _records = Enumerable.Empty<WeatherForecast>();
    
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    public WeatherForecastProvider()
        => GetForecasts();

    public IEnumerable<WeatherForecast> WeatherForecasts
        => _records;

    private void GetForecasts()
    {
        DateOnly startDate = DateOnly.FromDateTime(DateTime.Now);

        _records = Enumerable.Range(1, 2000000).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        });
    }
}

WeatherForecastService现在看起来像这样。 它是应用程序和数据源之间的数据代理。

public class WeatherForecastService
{
    private WeatherForecastProvider _weatherForecastProvider;

    public WeatherForecastService(WeatherForecastProvider weatherForecastProvider)
        => _weatherForecastProvider= weatherForecastProvider;

    public async ValueTask<ItemsProviderResult<WeatherForecast>> GetForecastAsync(ItemsProviderRequest request)
    {
        // normally request will be async  calling into a DbContext or API, so pretend it is
        await Task.Delay(250);
        
        var query = _weatherForecastProvider.WeatherForecasts;
        
        var count = query.Count();

        query = query
            .Skip(request.StartIndex)
            .Take(request.Count);

        return new ItemsProviderResult<WeatherForecast>(query, count);
    }
}

然后FetchData看起来像这样。

@page "/fetchdata"
@using SO75219173;
@inject WeatherForecastService ForecastService

<PageTitle>Weather forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            <Virtualize Context="forecast" ItemsProvider=this.ForecastService.GetForecastAsync>
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.TemperatureF</td>
                <td>@forecast.Summary</td>
            </tr>

            </Virtualize>
        </tbody>
    </table>

@code {
}

注意整个过程中对IEnumerable的使用。 这些方法不传递列表或 Arrays。

我们这样做是为了最大限度地减少所谓的物化。 IEnumerable是可以枚举的任何 object。

在此代码query中：

query = query
    .Skip(request.StartIndex)
    .Take(request.Count);

在Virtualize执行它的内部foreach循环之前，实际上不会被枚举（具体化）。 放置一些断点来检查。

我们确实必须执行一项具体化：获取要在ItemsProviderResult实例中传回的记录计数。

您还可以使用分页控件。 请参阅 QuickGrid - https://as.net.github.io/quickgridsamples/

注意：您应该始终在任何列表请求中使用分页。 永远不要从数据存储中获取不受约束的数据集。 您的代码能否优雅地处理 200 万条记录？ 如果你想得到很多，比如 select 并且知道应该有 30 条记录，设置一个现实的最大页面大小，比如 1000 条记录。