• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > 快速学习AngularJs HTTP响应拦截器

快速学习AngularJs HTTP响应拦截器

作者:赖祥燃 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含快速学习AngularJs HTTP响应拦截器等相关知识,赖祥燃 希望在学习及工作中可以帮助到您

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

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

四种拦截器

实现 request 方法拦截请求

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

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

实现 requestError 方法拦截请求异常

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

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

实现 response 方法拦截响应

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

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

实现 responseError 方法拦截响应异常

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

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

拦截器核心

拦截服务工厂

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);
}
};
}]); 
</div>

注册拦截工厂方法

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

示例

对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);
}
}
};
]);
</div>

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

</div>

您可能想查找下面的文章:

相关文章

  • 2017-05-30Angular2 (RC4) 路由与导航详解
  • 2017-05-30Angularjs 实现分页功能及示例代码
  • 2017-05-30Angular.js中处理页面闪烁的方法详解
  • 2017-05-30深入学习AngularJS中数据的双向绑定机制
  • 2017-05-30浅谈angularjs module返回对象的坑(推荐)
  • 2017-05-30AngularJS使用ngMessages进行表单验证
  • 2017-05-30AngularJS constant和value区别详解
  • 2017-05-30使用Angular缓存父页面数据的方法
  • 2017-05-30实例详解angularjs和ajax的结合使用
  • 2017-05-30NodeJs——入门必看攻略

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS基础学习笔记之表达式
    • AngularJS基础 ng-csp 指令详解
    • 浅析AngularJS Filter用法
    • AngularJS基础 ng-include 指令简单示例
    • AngularJS上拉加载问题解决方法
    • 详解AngularJs ui-router 路由的简单介绍
    • AngularJS入门教程之数据绑定原理详解
    • AngularJS实现路由实例
    • angularJS与bootstrap结合实现动态加载弹出提示内容
    • AngularJS基础 ng-submit 指令简单示例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有