有時，后臺處理批量數據，需要一定的時間，如果處理一部分往前臺送一部分，用戶體驗要好一些，這樣就用到這個知識點了。

后臺代碼中下：

[HttpGet("/getents")]public async IAsyncEnumerable<Entity> GetEntitys(){ for (var i = 0; i < 20; i++){_logger.LogInformation(i.ToString());await Task.Delay(RandomNumberGenerator.GetInt32(100, 500));yield return new Entity { ID = i, Time = DateTime.Now };}}

前端代碼，從后臺取到數據后，展現在前端(我這里是拼接，用vue也可以)，因為數據沒有取完，所以不是一個完整的json字符串，需要在最后加上“]”

@{ViewData["Title"] = "Home Page"; } <div class="text-center"><h1 class="display-4">實時加載</h1><div id="divmessage" class="alert alert-warning" role="alert"><span id="message"></span></div><ul id="data" class="list-group"></ul> </div> @section Scripts{ <script>$(function() {var xhr=new $.ajaxSettings.xhr(); xhr.onreadystatechange=function(){if(xhr.readyState==3){var list=JSON.parse(xhr.responseText.replace(']','')+']');$("#message").html("加載中…… 【"+list.length+"】")var html=""$(list).each(function(index,item){html+='<li class="list-group-item">'+item.id+" "+item.time+"</li>"})$("#data").html(html)}else if(xhr.readyState==4){var list=JSON.parse(xhr.responseText.replace(']','')+']');$("#message").html("加載完成，共"+list.length+"條記錄")$("#divmessage").removeClass("alert-warning")$("#divmessage").addClass("alert-success")}}xhr.open('GET', '/getents')xhr.send()}); </script> }

效果是后臺處理一塊，就返回一塊，前臺展示一塊，因為這里不能放視頻和動圖，所以可以自行運行結果看一下（.net6），或腦補一下效果。

總結

以上是生活随笔為你收集整理的让前端与后端异步起来的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。