当前位置: 首页 > 面试题库 >

AngularJS拦截所有$ http JSON响应

晋涛
2023-03-14
问题内容

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

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

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

这可以正常工作,并且inspectJSONResponse会看一下代码,如果出了什么问题,它将抛出异常并使用window.location.href重新加载页面。

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


问题答案:

您可以通过$httpProvider.interceptors在Angular1.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');
});


 类似资料:
  • 问题内容: 我似乎无法让$ httpProvider.interceptors实际进行拦截。我在JSFiddle上创建了一个示例,该示例记录了拦截器运行的时间以及$ http响应成功的时间。在成功返回响应之后,将运行请求拦截器。这似乎有些倒退。 我不能使用transformRequest,因为我需要更改配置中的参数。该部分未显示在示例中。 我正在使用AngularJS 1.1.5 http://j

  • 问题内容: 我目前在一个有角度的应用程序中工作,我想为我的应用程序中的所有http请求编写一个拦截器,这反过来会调用一个服务,以了解单点登录会话是否仍处于活动状态,如果未处于活动状态,我应该转到我的单点登录,然后根据用户请求加载下一页或结果。我不确定如何在AngularJS中编写拦截器,也不确定将页面重定向到“单一登录”时如何保存用户请求。 我当前正在使用angularjs 1.0.2,我看到在1

  • 问题内容: 我试图拦截所有AJAX调用,以检查AJAX响应是否包含我从PHP脚本作为JSON发送的特定错误代码(代码:ACCESS_DENIED,SYSTEM_ERROR,NOT_FOUND)。 我知道一个人可以做这样的事情: 但是-仅在“ ajaxSuccess”事件起泡到.log div时才起作用吗?我对么?通过将“ ajaxSuccess”事件绑定到文档可以实现我想要的东西吗? 我可以在jQ

  • 问题内容: 我对角度(和编程)不熟悉,这是一个看似简单的问题,但我无法弄清楚。 一些教程建议使用操纵http请求和响应。 我想知道更多关于拦截的事情,所以我看的正式文件,但我找不到,只有一个方法(useApplyAsync([值]);)与拦截任何东西,在一个属性(默认)(文档)。 我从其他教程中知道拦截器是常规服务工厂,并且知道如何使用它,但是我的问题是:由于语法是,所以我希望在中找到一个名为“

  • 问题内容: 是否可以为ng-click编写拦截器?我有一个按钮或链接,导致后端对象的删除。我想通过将属性添加到按钮/链接来创建一个确认对话框(模式)。例如: AngularJS有可能吗?有没有更好的方法可以解决此问题? 编辑 deleteIt方法驻留在不同的控制器中。 谢谢 问题答案: 我在下面放了一个示例指令: http://plnkr.co/edit/GJwK7ldGa9LY90bMuOfl?

  • 问题内容: 我在使用TypeScript在AngularJS中设置请求拦截器时遇到问题 以下代码段有效,但无效版本已注释掉。无论我在构造函数中注入什么,局部变量在方法中都是未定义的。 问题答案: 是因为错误。解: