如何優化我的Angular Http Post？

我必須對我的休息服務進行Http post調用，它會一次拉出大量數據。當我現在打電話時，頁面會凍結約1.5秒，並顯示頁面上的所有數據，並且可以滾動。但是直到數據全部返回，瀏覽器沒有響應。如何優化我的Angular Http Post？

有什麼辦法可以防止這種情況發生？有什麼方法可以在獲取數據時開始渲染頁面，而不必等待所有數據回來？

這是我對我的服務的電話。

getListItems(topicType: string, topicStatus?: number) { 
    const headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'}), 
      options = new RequestOptions({ headers: headers}); 
    let body = 'jwt=' + this.tempToken + '&type=' + topicType; 
    if(topicStatus !== undefined) { 
     body += '&status=' + topicStatus; 
    } 
    return this.http.post(this.baseUrl + 'read/topicslist', body, options).map((res) => res.json()); 
}

而在我的組件上，我將結果集存儲在用於在模板上顯示的對象上。

來源

2017-06-15 Ennio

你可以使用相當於[無限滾動]（https://github.com/metafizzy/infinite-scroll）（*有其他人*）。在每個頁面的末尾（滾動停止處），您將獲得另一塊數據。這與您在滾動Feed時Facebook的工作方式類似。 – Igor

您可以更改帖子以獲取數據塊。當你向下滾動另一個帖子發送到獲取下一個塊

來源

2017-06-15 14:28:31

我想看看是否有其他方式來避免這種情況（改變我的休息服務:)但看起來我可能不得不這樣做）。我的返回對象有大約12,000條記錄，當我在數據庫上運行查詢時，我在1毫秒內得到結果。在我的對象上使用* ngFor – Ennio

他們沒有銀色的子彈來解決這些類型的大數據集問題。您可以採用不同的方法和方法來緩解問題。有很多方法可以解決這個問題，但是你的解決方案將取決於你對數據做什麼。

根據你的問題，我知道你需要顯示多個用戶（類似數據集）的信息，用戶將滾動查看更多信息。

你可以設計像下面

1）添加啓動和頁面限制你的Ajax調用。

取代所有記錄，根據您的屏幕大小和UI上的每個記錄寬度和高度獲取數字記錄。如果您能夠在屏幕上顯示10條記錄，則將頁面限制設置爲20條記錄。

2）一旦用戶開始滾動，您可以使用虛擬滾動來獲取擴孔數據。我在我的項目中使用虛擬滾動它工作正常。 http://rintoj.github.io/angular2-virtual-scroll/

來源

2017-06-15 14:49:35 CharanRoot

如何優化我的Angular Http Post？

回答

相關問題