时间戳

首页 > 解决方案 > 在 Angular 1.4 中，在控制器中，我可以在 $http 请求之前和成功/错误之后插入“事件”以执行吗？

javascript - 在 Angular 1.4 中，在控制器中，我可以在 $http 请求之前和成功/错误之后插入“事件”以执行吗？

问题描述

我有一个需要发出大量数据请求的 Angular UI 应用程序。通常，我需要一个响应式 UI，即使我调用的 API 在返回结果方面不是那么快。这意味着我需要经常将应用程序置于“正在加载... ”状态。

我可以通过设置一个加载标志来实现这一点，当状态改变时 Angular UI 会关闭该标志，但这看起来是这样的：

$scope.requestFooData = function() {

   var parameters = $scope.BuildFooParams();

   //'loadingData' is a state variable that the UI uses 
   //for disabling regions, or showing spinners where 
   //and when applicable.
   $scope.loadingData = true;
   $http.get("API/getFoo" + parameters)
       .success(function(data) {
           //Handle data
           $scope.loadingData = false;
       })
       .error(function() {
           //Address the error
           $scope.loadingData = false;
       });
}

这行得通，但我必须记住在每个请求中集成至少三行代码。不仅如此，我可能需要在后续成功的 API 调用中隐藏一些 API 调用，级联 API 请求。在这种情况下，最好连接一个可以确定何时正确设置加载状态的信号量。在这种方法下，该逻辑变得更加复杂和令人费解。

有没有一种方法可以在我的控制器初始化时注入一个在发出任何 Web 请求（GET/POST/等）时触发的方法，一旦结果返回，它会触发另一个事件以进行状态清理？

标签： javascriptangularjs

解决方案

微调器标志的重置可以放在一个.finally块中：

$scope.loadingData = true;
$http.get("API/getFoo" + parameters)
  .then(function(response) {
    var data = response.data;
    //Handle data
    ̶$̶s̶c̶o̶p̶e̶.̶l̶o̶a̶d̶i̶n̶g̶D̶a̶t̶a̶ ̶=̶ ̶f̶a̶l̶s̶e̶;̶
}).catch(function(response) {
    //Address the error
    ̶$̶s̶c̶o̶p̶e̶.̶l̶o̶a̶d̶i̶n̶g̶D̶a̶t̶a̶ ̶=̶ ̶f̶a̶l̶s̶e̶;̶ 
}).finally(function() {
    $scope.loadingData = false;
});

该.finally块允许您观察承诺的实现或拒绝，但无需修改最终值。这对于释放资源或做一些无论承诺被拒绝还是解决都需要做的清理很有用。

有关详细信息，请参阅

推荐阅读