javascript - 从带 Angular $http.get 调用中重复调用静态 .json 文件的性能问题

Question

我想知道我在性能和最佳实践方面的决定，因为这看起来像是代码味道和性能影响。

1. 我有一个静态 .json 文件“Airports.json”
2. 上面的 json 是(大约 200 行代码，其中只有航空公司、联盟、carriedid)
3. 在 ng-repeat 循环中调用 Angular 过滤器，以便每几页多次调用服务
4. 服务工厂对服务调用的每个过滤器执行此http.get
5. 调用看起来像这样 return $http.get(serviceBase + 'Airlines.json').then...
6. .then 中的函数 return findAirport(results.data, code);
7. 函数循环访问从 $http.get 获取的 json 数据
8. for (var i = 0; i < airLen; i++) { var item = airportList.airlines[i]; if (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 初始化时请求一次数据，并保存对该 promise 的引用。

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);
    });
  }
}