javascript - Angular 最佳实践 : promise in a Factory or in a Controller?

Question

我的应用程序中有一个处理 API 调用的基本工厂。目前我正在使用以下表格:

.factory('apiFactory', function($http){

  var url = 'http://192.168.22.8:8001/api/v1/';

  return {
    getReports: function() {
      return $http.get(url+'reports').then(function(result) {
        return result;
      });
    },
    getReport: function(id) {
      return $http.get(url+'report/'+id).then(function(result) {
        return result;
      });
    }
  }
})

在我的 Controller 中，我是这样处理 promise 的:

.controller('exampleController', function($scope, apiFactory) {

      apiFactory.getReports().then(
        function(answer) {
          if (answer.status==200){
            if (answer.data.status == "error"){
              // DISPLAY ERROR MESSAGE
              console.log(answer.data.msg);
            }
          } else{
            // THROW error
            console.log('error: ', answer);
          }
        },
        function(error){
          console.log('error: ', answer);
        }
      );
    }
  }
})

似乎我可以将 promise 处理移至我的工厂，而不是在我的 Controller 中进行，但我不确定除了较小的 Controller 之外是否还有其他好处。

有人可以解释有关此模式的最佳实践吗？

Answer 1

最终由您决定要向服务调用方提供多少数据。如果需要，您绝对可以将 HTTP 响应对象返回给调用者，并让他们处理响应(顺便说一句，如果 promise 得到解决而不是拒绝，则响应始终是 HTTP 2xx)。

但是如果你想将调用者与数据到达那里的细节隔离开来(可能是缓存的，或者通过另一种机制提供的)，并且如果你需要对数据进行后处理，那么建议处理服务中的响应。

这是一个例子:

.factory("apiService", function($http, $q){
  var url = 'http://192.168.22.8:8001/api/v1/';

  return {
    getReports: function() {
      return $http.get(url+'reports').then(function(result) {
        var data = result.data;

        if (data === "something I don't accept"){
           return $q.reject("Invalid data");
        }

        var processedData = processData(data);
        return processedData;
      })
      .catch(function(err){
         // for example, "re-throw" to "hide" HTTP specifics
         return $q.reject("Data not available");
      })
    },
    // same idea for getReport
  }
});

那么 Controller 就不需要关心底层机制——它得到的只是数据或拒绝。

.controller('exampleController', function($scope, apiService) {
   apiService.getReports()
     .then(function(reports){
        $scope.reports = reports; // actual reports data
     });
})

题外话:

请注意我是如何将服务名称从 "apiFactory" 更改为 "apiService" 的。我想指出这一点以消除可能的误解。无论您使用 .factory 还是 .service 还是 .value 您作为注入(inject)剂获得的始终是一个服务 实例。 .factory 只是一种如何实例化此服务的机制，因此 “apiFactory” 这个名称用词不当。此处唯一的“工厂”是您使用 .factory 注册的函数(当然可以是匿名的):

.factory("fooSvc", function fooSvcFactory(){
   return {
      getFoo: function(){...}
   }
})