angularJs HTTP响应拦截器

为何要用拦截器?

任何时候,如果我们想要为请求添加全局功能,例如身份认证、错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段。

angularJs通过拦截器提供了一个从全局层面进行处理的途径.

拦截器允许你:

通过实现 request 方法拦截请求: 该方法会在 http(requestconfigurationobject)promisepromise http 调用失败。
通过实现 response 方法拦截响应: 该方法会在 http(responseobject)promise(requestconfiguration)(headers)(status)(data)promise http 调用失败。
通过实现 requestError 方法拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如说关闭进度条,激活按钮和输入框什么之类的。
通过实现 responseError 方法拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了,或者被上一个响应拦截器中断了。在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。
拦截器的核心是服务工厂,通过向 httpprovider.interceptors httpProvider中进行注册。
angularJs提供四种拦截器,其中两种成功拦截器(request、response),两种失败拦截器(requestError、responseError)。
在服务中添加一种或多种拦截器:

angular.module("myApp", [])
    .factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) {
        var httpInterceptor = {
            'responseError' : function(response) {
                ......
                return $q.reject(response);
            },
            'response' : function(response) {
                ......
                return response;
            },
            'request' : function(config) {
                ......
                return config;
            },
            'requestError' : function(config){
                ......
                return $q.reject(config);
            }
        }
    return httpInterceptor;
} 

然后使用$httpProvider在.config()函数中注册拦截器

angular.module("myApp", [])  
.config([ '$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('httpInterceptor');  
} ]); 

实际的例子:(对401、404的拦截)

routerApp.config([ '$httpProvider', function($httpProvider) {  
        $httpProvider.interceptors.push('httpInterceptor');  
    } ]);  

    routerApp.factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) {  
        var httpInterceptor = {  
            'responseError' : function(response) {  
                if (response.status == 401) {  
                    var rootScope = $injector.get('$rootScope');  
                    var state = $injector.get('$rootScope').$state.current.name;  
                    rootScope.stateBeforLogin = state;  
                    rootScope.$state.go("login");  
                    return $q.reject(response);  
                } else if (response.status === 404) {  
                    alert("404!");  
                    return $q.reject(response);  
                }  
            },  
            'response' : function(response) {  
                return response;  
            }  
        }  
        return httpInterceptor;  
    }   
]);  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值