Angular - 从Factory方法检索数据的最佳实践

Question

我正在寻找有关从本地JSON文件检索数据并处理响应的最佳方法的一些信息.在浏览Stack Overflow之后,我有一些混合的想法,因为我已经看到了多种方法做同样的事情(虽然没有解释为什么一个可能会或可能不是首选).

基本上,我有一个Angular应用程序,它利用工厂从JSON文件中检索数据; 然后我在我的html文件中使用它之前等待响应在我的控制器中解析,类似于下面的内容:

选项1

厂:

comparison.factory('Info', ['$http', function($http) {
var retrievalFile = 'retrievalFile.json';

return {
 retrieveInfo: function() {
  return $http.get(retrievalFile);
 }
}

}]);

控制器:

comparison.controller('comparisonController', ['$scope', 'Info', function($scope, Info) {

Info.retrieveInfo().then(function(response) {
  $scope.info = response.data;
});

}]);

我的主要观点是找出何时最好等待响应解决,或者甚至是否重要.我正在想让工厂恢复履行的承诺,并等待控制器也检索数据.在我看来,最好将所有数据检索抽象出控制器并进入工厂,但我不确定这是否延伸到等待工厂本身返回的实际数据.考虑到这一点,我对是否选择选项1或选项2感到困惑,并且非常感谢来自更有经验/合格开发人员的一些反馈!

选项2

厂:

comparison.factory('Info', ['$http', function($http) {
var retrievalFile = 'retrievalFile.json';

return {
  retrieveInfo: function() {
    return $http.get(retrievalFile).then(function(response) {
      return response.data;
    });
  }
}

}]);

控制器:

comparison.controller('comparisonController', ['$scope', 'Info', function($scope, Info) {

Info.retrieveInfo().then(function(response) {
  $scope.info = response;
});

}]);

感谢您提前提出任何意见/建议!

Answer 1

这取决于您的控制器的期望以及您如何设置应用程序。一般来说，我总是选择第二个选项。这是因为我通常在所有 api 请求中都有全局错误或成功处理程序，并且我有一个共享的api service. 像下面这样的东西。

var app = angular.module('app', []);

app.service('ApiService', ['$http', function($http) {
    var get = function(url, params) {
    $http.get(url, { params: params })
        .then(handleSuccess, handleError);
  };

  // handle your global errors here
  // implementation will vary based upon how you handle error
  var handleError = function(response) {
    return $q.reject(response);
  };

  // handle your success here
  // you can return response.data or response based upon what you want
  var handleSuccess = function(response) {
    return response.data;
  };
}]);

app.service('InfoService', ['ApiService', function(ApiService) {
    var retrieveInfo = function() {
    return ApiService.get(retrievalFile);

    /**
    // or return custom object that your controller is expecting
    return ApiService.get.then(function(data) {
      return new Person(data);
    });
    **//
  };

  // I prefer returning public functions this way
  // as I can just scroll down to the bottom of service 
  // to see all public functions at one place rather than
  // to scroll through the large file
  return { retrieveInfo: retrieveInfo };
}]);

app.controller('InfoController', ['InfoService', function(InfoService) {
  InfoService.retrieveInfo().then(function(info) {
    $scope.info = info;
  });
}])

或者，如果您使用路由器，则可以将数据解析到控制器中。ngRouter 和 uiRouter 都支持解析：

$stateProvider.state({
    name: 'info',
  url: '/info',
  controller: 'InfoController',
  template: 'some template',
  resolve: {
    // this injects a variable called info in your controller
    // with a resolved promise that you return here
    info: ['InfoService', function(InfoService) {
        return InfoService.retrieveInfo();
    }]
  }
});

// and your controller will be like
// much cleaner right
app.controller('InfoController', ['info', function(info) {
    $scope.info = info;
}]);