javascript - 在我自己的 Angular 服务中，如何将返回值返回给调用该服务的 Controller ？

Question

我无法弄清楚 $http 中的成功和错误回调以及 promise 的“then”部分。 $http 服务返回一个 promise 。 “成功”回调是“然后”的示例吗？如果我将 $http 放入我自己的服务中会怎样？我该怎么做？

我认为代码更容易表达我的问题:

app.controller('MainCtrl', function ($scope, $log, BooksService) {
    BooksService.retrieveAllBooks().then(function(results) {
      $scope.allBooks = results;
    });
  });


app.factory('BooksService', function($http,$log) {
  var service = {
    retrieveAllBooks: function() {
      return $http({
        method: 'GET','https://hugebookstore.org/allbooks'
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        }
      }).success(function(data, status, headers, config) {
         var allbooks = transformDataIntoBooksArray(data);//this function exists and just takes raw data and turns them into Book objects
         return allbooks;/*how is this "success" callback related to the "then"() callback in app.controller above?*/
      };
      }).error(function(data, status, headers, config) {
        $log.error('here is an error'+data + status + headers + config);
      });
    }
  };
  return service;
});

有关 app.controller 代码的问题:

我需要在app.controller中使用“then()”函数吗？

我只想让我的 Controller 使用 BooksService 获取所有书籍的列表。 BooksService 已经有一个“then”类型的子句，它是“success”回调。看来我有一个不必要的“then”。真的吗？

另外，“then”何时被调用，我可以在 then 回调函数的参数中添加任何内容吗？

我不明白默认提供哪些参数以及我可以添加哪些参数。

有关 app.factory 代码的问题:

首先，这就是我所理解的代码要做的事情。

我正在使用factory()方法而不是Angular中可用的service()方法创建一个BooksService。我正在定义一个名为 retrieveAllBooks() 的函数，该函数在幕后使用 Angular 中的 $http 发出异步 GET 请求，而 Angular 本身就是一项服务。 RetrieveAllBooks() 只不过是 $http GET 服务的包装器，这使得客户端可以轻松地调用 BooksService.retrieveAllBooks() 并获得一个数组Book 对象。

“success”回调何时执行？它与我的 app.controller 中的“then”回调有何关系？

我的 success() 回调中的 return 值似乎没有返回到 app.controller。为什么？

如何将 allbooks 数组返回到 app.controller(最初称为 BooksService.retrieveAllBooks())？

success 回调中是否允许使用任何其他参数？

我需要从 retrieveAllBooks() 函数定义返回什么？我是否单独返回 $http Promise，还是需要从成功和 error 回调中都返回某些内容？

我知道这很冗长，但我希望有人可以帮助我，b/c 这是为了模式 - 将我的网络调用分离到它自己的 service 层，而不是调用 $ http 直接在我的 controller 层中，将一遍又一遍地完成。

谢谢!!

Answer 1

success 和 error 处理程序特定于 $http 返回的 Promise。不过，它们类似于 .then(function onFulfill(){}, function onReject(){})。

您是否想直接返回该 promise 或实现其他内容取决于您。

通常，您的 Controller 不应该关心您的服务如何处理请求。因此，在我看来，您不应该直接返回该 promise 。只需处理服务中的成功和错误情况。如果请求成功则返回结果，如果请求失败则抛出Error。

然后，您可以在 Controller 中使用通用的 .then(function onFulfill(){}, function onReject(){}) 模式，因为这始终有效，并且是 Angular 中 Promise 所期望的。

onFulfill 回调始终接收您的结果作为参数，onReject 回调接收 Error 作为参数。

那么，你有什么选择呢？要么完全删除服务中的 .success 和 .error 回调，并在 Controller 中处理成功案例中的转换，要么创建一个新的延迟 promise 以返回转换后的结果:

app.factory('BooksService', function($http,$log,$q) {
  var service = {
    retrieveAllBooks: function() {
      var deferred = $q.defer();
      $http({
        method: 'GET','https://hugebookstore.org/allbooks'
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        }
      }).success(function(data, status, headers, config) {
         var allbooks = transformDataIntoBooksArray(data);//this function exists and just takes raw data and turns them into Book objects
         deferred.resolve( allbooks );
      };
      }).error(function(data, status, headers, config) {
        $log.error('here is an error'+data + status + headers + config);
        deferred.reject( new Error( 'here is an error'+data + status + headers + config );
      });
      return deferred.promise;
    }
  };
  return service;
});

尽管如此，如果我们考虑以下因素，我们可以节省这一点: - Angular 已经跟踪错误 - 延期是多余的，可以避免 - Content-Type 和 Accept 无论如何都是由 Angular 和服务器生成的。 - 我们可以为我们的操作保存匿名包装

所以，我们最终得到:

app.factory('BooksService', function($http) {
  return {
    retrieveAllBooks: function() { 
      return $http.get('https://hugebookstore.org/allbooks').
             then(transformDataIntoBooksArray); // Error tracked by Angular already
      }
    }
});