快速学习AngularJs HTTP响应拦截器_AngularJS

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

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

四种拦截器

实现 request 方法拦截请求

request: function(config) {
// do something on request success
return config || $q.when(config);
} 

该方法会在 $http 发送请求后台之前执行,因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝,导致 $http 调用失败。

实现 requestError 方法拦截请求异常

requestError: function(rejection) {
  // do something on request error  return $q.reject(rejection);
} 

有时候一个请求发送失败或者被拦截器拒绝了,请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如说关闭进度条,激活按钮和输入框什么之类的。

实现 response 方法拦截响应

response: function(response) {
  // do something on response success
return response || $q.when(response);} 

该方法会在 $http 接收到从后台过来的响应之后执行,因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数,然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration),头(headers),状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝,导致$http 调用失败。

实现 responseError 方法拦截响应异常

responseError: function(rejection) {
// do something on response error  return $q.reject(rejection);
} 

有时候我们后台调用失败了,也有可能它被一个请求拦截器拒绝了或者被上一个响应拦截器中断了。在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。

拦截器核心

拦截服务工厂

var app = angular.module("ajaxHttp", []);
app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {
return {
request: function(config) {
// do something on request success
return config || $q.when(config);
},
   requestError: function(rejection) {
     // do something on request error
     return $q.reject(rejection)
   },
response: function(response) {
// do something on response success
return response || $q.when(response);
},
responseError : function(rejection) {
// do something on response error
return $q.reject(rejection);
}
};
}]); 

注册拦截工厂方法

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

示例

对401,404的拦截处理

app.config(["$httpProvider", function($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
}]);
app.factory("httpInterceptor", ["$q", "$injector", function($q, $injector) {
return {
"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) {
console.log("404!");
return $q.reject(response);
}
}
};
]);

以上内容给大家分享快速学习AngularJs HTTP响应拦截器 的相关知识,希望大家喜欢,同时感谢大家一直以来对网站的支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索angularjs_http拦截器
, angularjs_http拦截
angularjs拦截器
,以便于您获取更多的相关知识。

时间: 2024-10-09 08:59:01

快速学习AngularJs HTTP响应拦截器_AngularJS的相关文章

浅析AngularJs HTTP响应拦截器_AngularJS

为何要用拦截器? 任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段.  angularJs通过拦截器提供了一个从全局层面进行处理的途径.  拦截器允许你: 通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行,因此你可以修改配置或做其他的操作.该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise

Struts2学习笔记之控制拦截器

拦截器的作用类似与我们没有基于strtus框架做开发时候的 filter. 配置默认拦截器,我们这里的拦截器的名字为 defaultStack  代码如下 复制代码  <default-interceptor-ref name="defaultStack" />    声明拦截器,这里我们声明的拦截器的名字是 myInterceptor  代码如下 复制代码 <interceptors>                <interceptor name=&

Angularjs注入拦截器实现Loading效果_AngularJS

angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果烦回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类. 什么是拦截器? $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂.下面的例子告诉你怎么创建一个拦截器: <!-- lang: js --> module.factory('myInterceptor', ['$log', function($log) {

详解为Angular.js内置$http服务添加拦截器的方法_AngularJS

前言 在Angular框架中,创建团队为使用者进行了Ajax请求的封装,并通过$http服务暴露出相关的接口.Angular在其官方文档中指出, $http服务底层针对Web常见的安全攻击做出了相应的对策,也就是说使用$http服务封装的Ajax为使用者提供了更为安全的保障.作为一个框架,保证框架的可用性,适配性是很有必要的. Angular在设计,实现中也体现出来了这样的良好风格.我们通常在使用Ajax时,有时候希望我们能够在请求发起前或接收到请求后做一些相应的处理工作,比如:在请求发起前,在

angular之interceptors拦截器

    <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <tit

Struts2重新学习之自定义拦截器(判断用户是否是登录状态)

拦截器 一:1:概念:Interceptor拦截器类似于我们学习过的过滤器,是可以再action执行前后执行的代码.是web开发时,常用的技术.比如,权限控制,日志记录. 2:多个拦截器Interceptor连在一起组成了Interceptor栈.拦截器是AOP面向切面编程的一种实现,具有热插拔的效应. 3:Struts2拦截器,每个拦截器类只有一个对象实例,即采用了单利模式.所有引用这个拦截器的action都共享着一拦截器类的实例.   拦截器和过滤器的区别 1:拦截器和过滤器的概念非常类似

Struts2框架学习之六:理解并使用拦截器

前言 拦截器是Struts2框架的核心功能,理解并使用拦截器有助于更灵活使用Struts2.拦截器与Servlet中的过滤器有些类似却又不尽相同.因为在Struts2中拦截器更像一个可插拔的组件,围绕Action和Result进行,可以在方法调用之前.之后使用.通过Struts2的工作流程(后面还会看到一个请求在Struts2中详细的执行流程)可以发现调用一个Action之前之后有许多的拦截器,这些拦截器都通过后才执行具体的action.对于每一个拦截器来说,可以直接返回,从而终止余下的拦截器.

【spring源码学习】springMVC之映射,拦截器解析,请求数据注入解析,DispatcherServlet执行过程

[一]springMVC之url和bean映射原理和源码解析 映射基本过程 (1)springMVC配置映射,需要在xml配置文件中配置<mvc:annotation-driven >  </mvc:annotation-driven> (2)配置后,该配置将会交由org.springframework.web.servlet.config.MvcNamespaceHandler处理,该类会转交给org.springframework.web.servlet.config.Anno

springMvc源码学习之:spirngMvc的拦截器使用

    SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那样子判断当前时间是否是购票时间.    一.定义Interceptor实现类      SpringMVC 中的Interceptor 拦截请求是通过HandlerInterceptor 来实现的.在SpringMVC 中定义一个Interceptor 非常简单,主要有两种方式,第一种方式是