ionic2+Angular 使用HttpInterceptorService拦截器 统一处理数据请求
sstep1:新建http-Interceptor.ts文件
import { Injectable } from '@angular/core';
import { HttpInterceptorService } from 'ng-http-interceptor';
import { Observable } from 'rxjs';
import { URLService } from './urls';
import { MsgBarService } from './msg-bar';
@Injectable()
export class HttpIntService {
constructor(public httpservice: HttpInterceptorService, public urlservice: URLService, private ms: MsgBarService) {
httpservice.request().addInterceptor((data, method, option) => {
data[0] = this.urlservice.getUrl(data[0]);//地址拼接
return data;
})
httpservice.response().addInterceptor(response => {
return response.map(result => {
var json = result.json();
if (json.state && json.state.code == 200) {
return result;// 返回请求结果
} else if (json.state && json.state.code == 600) {
//兑换商品是积分不足
// return result;
} else {
this.ms.showError(json.state.msg);//统一处理返回的提示信息
}
// //返回状态
throw json.state.msg;
}).catch(error => {
if (typeof error === 'string') {
this.ms.showError(error);
}
else if (error != response) {
response.subscribe(p => {
this.ms.showError('服务器发生错误');
})
}
else {
this.ms.showError('服务器发生错误');
}
return Observable.throw(error)
})
})
}
}
step2:在app.module.ts文件中添加HttpIntService,并且在构造器中添加。
@NgModule({
declarations: [
MyApp,
TabsPage,
],
imports: [
BrowserModule,
HttpModule,
HttpInterceptorModule,
IonicModule.forRoot(MyApp,{
backButtonText:'',
backButtonIcon:'jf-arrow-back',//自定义返回按钮图标
iconMode:'ios',//统一图标样式
mode: 'ios',//Android和iOS模式统一
menuType:'reveal',
pageTransition:'ios-transition',
tabsHideOnSubPages:true,
preloadModules: true
})
],
bootstrap: [IonicApp],
entryComponents: [],
providers: [
StatusBar,
SplashScreen,
HttpIntService,
URLService,
HttpInterceptorService,
WechatService,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule {
constructor(_:HttpIntService){
}
}
ionic2+Angular 使用HttpInterceptorService拦截器 统一处理数据请求的更多相关文章
- angular 用拦截器统一处理http请求和响应 比如加token
想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去,也就是{headres:{'token':1}} index.html里引入以下js: ...
- (转)Angular中的拦截器Interceptor
什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 转之:http://my.osch ...
- AngularJS 拦截器实现全局$http请求loading效果
日常项目开发中,当前端需要和后端进行数据交互时,为了友好的UI效果,一般都会在前端加个loading的状态提示(包括进度条或者icon显示),数据传输或交互完成之后,再隐藏/删除loading提示. ...
- 解决SpringMVC拦截器中Request数据只能读取一次的问题
解决SpringMVC拦截器中Request数据只能读取一次的问题 开发项目中,经常会直接在request中取数据,如Json数据,也经常用到@RequestBody注解,也可以直接通过request ...
- angular之interceptors拦截器
<!DOCTYPE html> <html ng-app="nickApp"> <head> <meta charset="UT ...
- axios封装,使用拦截器统一处理接口
1.项目路径下,引入axios.qs依赖 npm install axios npm install qs 2.在项目的src路径下新建一个commJs文件夹,在commJs文件夹里新建aps.js和 ...
- angular http interceptors 拦截器使用分享
拦截器 在开始创建拦截器之前,一定要了解 $q和延期承诺api 出于全局错误处理,身份验证或请求的任何同步或异步预处理或响应的后处理目的,希望能够在将请求移交给服务器之前拦截请求,并在将请求移交给服务 ...
- Okhttp拦截器统一异常处理并多次读取response.body().string()
参考:https://blog.csdn.net/a624806998/article/details/73863606 引言: 写这篇文章,因为在自己编写实现Http日志拦截器的时候,在拦截器中使用 ...
- Struts2 在登录拦截器中对ajax请求的处理
前言: 由于ajax请求不像http请求,可以直接进行页面跳转,你返回的所有东西,ajax都只会识别为一个字符串. 之前尝试的方法是在拦截器中返回一个标识给ajax,然后再在每一个ajax请求成功之后 ...
随机推荐
- 用AngularJS实现对表格的增删改查(仅限前端)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 整理关于web项目如何防止CSRF和XSS攻击的方法
1 了解CSRF的定义 CSRF(Cross-site request forgery)跨站请求伪造,也被称为"One Click Attack"或者Session Riding, ...
- lnmp一键安装的卸载
http://blog.csdn.net/lansetiankong12/article/details/48130507 如果是lnmp一键安装的 进入安装包目录 [root@www home]# ...
- electron 学习笔记
一.快速搭建一个electron 项目结构 # 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start # 进入这 ...
- DedeCMS实现自定义表单提交后发送指定QQ邮箱法
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_3_dg&wd=dedecms 邮箱&oq=d ...
- asp.net -mvc框架复习(1)-ASP.NET网站开发概述
1.网站开发的基本步骤: 2.网站开发的需要的知识结构 (1)网站开发前台页面技术 页面设计:HTML .CSS+DIV 页面特效:JavaScript.jQery (2)OOP编程核心公共技能 C ...
- Tomcat下的Server.xml配置文件详解
自15年毕业到现在已经入行两年多了,一直以来没有深入的了解过tomcat的详细配置,只懂修改一下端口号.在网上找了些相关资料来支撑这篇文章,深入了解server.xml文件各配置的作用 <?xm ...
- HEXO+Github,搭建属于自己的博客
摘录自:http://www.jianshu.com/p/465830080ea9 1. github的准备 账号 密码 建立Repository建立与你用户名对应的仓库,仓库名必须为[your_us ...
- mybatis if条件查询 及<号的问题
摘录自:http://flt95.blog.163.com/blog/static/12736128920136185841551/ <if test="p=='1'"> ...
- mybatis-pageHelper做分页
Mybatis-PageHelpera是一个很好的第三方分页插件,支持很多数据库,几乎主流的数据库都支持 github地址:https://github.com/pagehelper/Mybatis- ...