49

我有一个使用 AngularJS 构建的应用程序和一个以 JSON 形式提供所有请求的服务器端后端。每个请求都包装在一个 JSON 容器中，该容器包含一个数据变量，其中包含特定于请求的数据。其他数据，用于在应用程序中保持状态和控制，检查错误和成功消息，并检查会话标志。所有这些其他变量都随每个请求一起提供，并且在数据变量之前首先检查。

现在我有一种方法可以先检查 JSON 响应的内容，然后再检查数据本身。

$http.get('something.json').success(function(response) {
   var data = examineJSONResponse(response);
   //do the data stuff
});

这有效，examineJSONResponse 会查看代码，如果有问题，它会抛出异常并使用 window.location.href 重新加载页面。

有什么方法可以在 AngularJS 中自动执行此操作，以便每次进行 $http 调用时都会对其进行检查并仅将数据变量内容作为 JSON 响应返回？

4

2 回答 2

93

$httpProvider.interceptors您可以通过使用 Angular 1.1.4+添加拦截器来拦截响应（请参阅此处的文档搜索拦截器）。

对于像 json 这样的特定内容类型，即使调用成功，您也可能会拒绝更改或抛出异常。您也可以在此处修改response.data将传递给您的控制器代码的内容：

myModule.factory('myHttpInterceptor', function ($q) {
    return {
        response: function (response) {
            // do something on success
            if(response.headers()['content-type'] === "application/json; charset=utf-8"){
                // Validate response, if not ok reject
                var data = examineJSONResponse(response); // assumes this function is available

                if(!data)
                    return $q.reject(response);
            }
            return response;
        },
        responseError: function (response) {
            // do something on error
            return $q.reject(response);
        }
    };
});
myModule.config(function ($httpProvider) {
    $httpProvider.interceptors.push('myHttpInterceptor');
});

注意：这是 1.1.4 之前版本的原始答案（responseInterceptorsAngular 1.1.4 已弃用）：

也许有更好的方法，但我认为您可以使用 http 响应拦截器（在此处描述）（对于特定的内容类型，如 json）执行类似于这篇文章的操作，即使调用成功，您也可能拒绝更改或抛出异常. 您也可以在此处修改将传递给您的控制器代码的内容。response.data

myModule.factory('myHttpInterceptor', function ($q) {
    return function (promise) {
        return promise.then(function (response) {
            // do something on success
            if(response.headers()['content-type'] === "application/json; charset=utf-8"){
                // Validate response if not ok reject
                var data = examineJSONResponse(response); // assumes this function is available

                if(!data)
                    return $q.reject(response);
            }
            return response;
        }, function (response) {
            // do something on error
            return $q.reject(response);
        });
    };
});
myModule.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
});
于 2012-08-14T17:38:45.490 回答
7

另一种解决方案是创建一个服务并在 $http 变量周围使用它。

angular.module('App', [])
  .factory('myHttp',['$http',function($http) {
    return function(url, success, failure) {
      $http.get(url).success(function(json) {
          var data = examineJSONResponse(json);
          data && data.success ? success() : failure();
        }).error(failure);
      );
    }
}]);

现在可以这样称呼：

myHttp(url, onSuccess, onFailure);
于 2012-08-15T02:28:25.297 回答