Blazor WASM调用流式API时StateHasChanged不生效，求无JS解决方案

问题背景 #

在Blazor WASM中调用流式API时，UI只能在所有数据返回后一次性更新，无法实时展示逐步返回的内容。哪怕调用了StateHasChanged()，甚至加了Task.Yield()都没效果——这是因为Blazor WASM的单线程特性，流式读取的循环一直占着线程，UI渲染被挤到了最后。

核心代码如下：

await foreach (var item in GetFromApi(path))
{
    result += item;
    StateHasChanged();
}

GetFromApi方法实现：

public async IAsyncEnumerable<string> GetFromApi(string path, int bufferSize = 5000)
{
    using var request = new HttpRequestMessage(HttpMethod.Get, path);
    request.SetBrowserResponseStreamingEnabled(true);
    using var response = await http.SendAsync(request, HttpCompletionOption.ResponseHeadersRead);
    using var stream = await response.Content.ReadAsStreamAsync();
    using var reader = new StreamReader(stream);

    var buffer = new char[bufferSize];
    int bytesRead;

    while ((bytesRead = await reader.ReadBlockAsync(buffer, 0, buffer.Length)) > 0)
    {
        var text = new string(buffer, 0, bytesRead);
        yield return text;
    }
}

解决方案 #

要让UI实时更新，关键是在每次流式读取后，明确给UI线程让出处理时间，调整后的代码如下：

await foreach (var item in GetFromApi(path).ConfigureAwait(false))
{
    // 必须在UI线程更新状态和通知渲染
    await InvokeAsync(() => 
    {
        result += item;
        StateHasChanged();
    });
    
    // 让出线程给UI渲染，1毫秒足够触发渲染队列
    await Task.Delay(1);
}

关键调整点说明 #

• ConfigureAwait(false)：让流式读取的异步操作不用每次都切回UI线程，减少不必要的线程切换开销，提升效率。
• InvokeAsync包裹状态更新：Blazor要求所有UI相关操作必须在主线程执行，把result更新和StateHasChanged()放在InvokeAsync里，确保线程安全。
• Task.Delay(1)替代Task.Yield()：Task.Yield()只是把任务放回队列，但如果队列里还有流式读取的任务，UI渲染还是排不上号。Task.Delay(1)会强制暂停当前操作，让Blazor渲染引擎有机会处理UI更新，这是最可靠的方式。

额外检查点 #

• 确认API端启用分块传输编码：如果API是先缓存所有数据再一次性返回，Blazor端再怎么调整也无法实时获取数据。可以通过浏览器开发者工具的Network面板，查看响应头是否包含Transfer-Encoding: chunked。
• 调整缓冲区大小：如果API返回的块太小，频繁UI更新可能导致卡顿，适当调大bufferSize（比如10000），平衡实时性和性能。

内容的提问来源于stack exchange，提问作者Niels Brinch