從$ http.get調用中反復調用靜態.json文件的性能問題

Question

我想知道我的性能和最佳實踐決策，因為這看起來像是代碼味道和性能問題。

1. 我有一個靜態的.json文件“ Airports.json”
2. 上面的json是（大約200行代碼，僅包含airline，alliance，carriedid）
3. 在ng-repeat循環中調用角度過濾器，以每幾頁幾次調用服務
4. 服務工廠通過http.get過濾器進行服務調用
5. 調用看起來像這樣返回$ http.get（serviceBase +'Airlines.json'）。然后...
6. 然后在函數中返回findAirport（results.data，code）;
7. 函數遍歷從$ http.get獲取的json數據
8. for（var i = 0; i <airLen; i ++）{var item = airportList.airlines [i]; 如果（item.carrierId ==代碼）{
9. 這對性能來說可怕嗎？
10. 有什么選擇？

代碼架構：

html

 {{ data.whatever | myfilter }} 

過濾

 .filter ..  calls service with the specific code  e.g. "DL"

服務

var airportCodeService = function ($http, $q) {
    var serviceBase = '../apps/temp/Api_Responses/',
        factory = {};

    factory.getAirlineFromCarrierId = function (code) {
        return $http.get(serviceBase + 'Airlines.json').then(function (results) {
            return findAirport(results.data, code);                
        });
    }

    function findAirport(airportList, code) {

        var airLen = airportList.airlines.length;
        var res = "";

        for (var i = 0; i < airLen; i++) {
            var item = airportList.airlines[i];
            if (item.carrierId == code) {
                res = item.airline;
                break;
            }

        }
        //console.log(res);
        return res;
    }

似乎我應該保留json數據，而不是每個過濾器請求等調用$ http.get。

Answer 1

如果json是靜態的，則沒有理由重復請求它。 您是對的，這對於性能而言是可怕的！

最直接的解決方法是在airportCodeService初始化時請求一次數據，並保存對該承諾的引用。

var airportCodeService = function($http, $q) {
  var serviceBase = '../apps/temp/Api_Responses/',
    factory = {};

  //Request the data once at service startup
  var airlinePromise = $http.get(serviceBase + 'Airlines.json');

  factory.getAirlineFromCarrierId = function(code) {
    //Reuse the same promise - it won't make another request!
    return airlinePromise.then(function(results) {
      return findAirport(results.data, code);
    });
  }
}