.NET MVC使用IAsyncEnumerable实现异步显示数据的方法

一、业务需求

有时Web页面需要与后端（控制器）进行异步数据交互，下面使用IAsyncEnumerable（异步流）进行演示。

二、实现方法

（一）后端代码

1、定义一个演示类Class1，有一个获取集合的方法，该方法是异步的，返回IAsyncEnumerable<Class1>

public class Class1
{
    public int Id { get; set; }
    public string Name { get; set; }

    public async IAsyncEnumerable<Class1> GetListAsync()
    {
        for (int i = 1; i <= 10; i++)
        {
            Class1 cc = new Class1 { Id = i, Name = $"Name{i}" };
            //模拟业务处理有延时
            await Task.Delay(2000);
            yield return cc;
        }

    }
}

2、控制器创建一个POST方法，用于异步返回集合数据

[HttpPost]
public async IAsyncEnumerable<Class1> GetDataList1()
{
    Class1 class1= new Class1();
    await foreach(var item in class1.GetListAsync())
    {
        yield return item;
    }
}

（二）前端Web网页

使用await fetch进行异步调用

<div class="text-center">
    <button onclick="fetchData()">aaa</button>
    <div id="data-container"></div>
</div>
<script>
    async function fetchData() {
        const url = '/Home/GetDataList1';
        const response = await fetch(url, {
            method: 'POST'
        })
            
        if (!response.ok) {
            //后端调用出错
            throw new Error('Network response was not ok');
        }

        const container = document.getElementById('data-container');
        const reader = response.body.getReader()
        var i = 1;
        while (true) {
            const { value, done } = await reader.read();
            
            if (done) {
                console.log("over");

                break;
            }
            var time = new Date()
            // 处理接收到的数据
            var decodedData = new TextDecoder("utf-8").decode(value);
            console.log('value' + i,time, decodedData)
            //由于每次返回结果都是总json字符串的一部分，所以下面5行将多余字符进行处理
            decodedData = decodedData.replace("[{", "{")
            decodedData = decodedData.replace("}]", "}")
            if (decodedData.substring(0, 1) == ',') {
                decodedData = decodedData.substring(1, decodedData.length)
            }
            console.log('处理后' + i, decodedData)
            var item = JSON.parse(decodedData);
               
                    var element = document.createElement('div');
                    element.textContent = item.name; 
                    container.appendChild(element);
            i++
        }
    }
</script>

三、运行效果

运行后如下图所示，每隔2秒钟增加一行字符。