频道导航

AngularJS拦截所有$http JSON响应

2020-04-02 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了AngularJS拦截所有$http JSON响应，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

现在我有一个方法来检查JSON响应的内容，然后检查数据本身。

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

这工作和examJSONResponse检查代码，如果有错误，那么它抛出一个异常，并重新加载页面使用window.location.href。

有什么办法，我可以在AngularJS中自动化这样，每次一个$ http调用，然后它检查这个，只返回数据变量内容作为JSON响应？

你可以通过添加拦截器到$ httpProvider.interceptors与Angular 1.1.4拦截响应(见文档 here 搜索拦截器)。

对于像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之前版本的原始答案(responseInterceptors已被Angular 1.1.4弃用)：

也许有一个更好的方法，但我认为你可以做类似于this post与http响应拦截器(描述here)(对于像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');
});