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请求成功之后 ...
随机推荐
- .31-浅析webpack源码之doResolve事件流(2)
放个流程图: 这里也放一下request对象内容,这节完事后如下(把vue-cli的package.json也复制过来了): /* { context: { issuer: '', compiler: ...
- ECharts插件的使用
ECharts插件:官网下载echarts.js开发者可以选择源码.下载地址:http://echarts.baidu.com/download.html 下载之后,echarts.js放在js文件夹 ...
- 项目启动log4j相关警告问题
在项目启动时出现了下面的警告: log4j:WARN custom level class [xxxxx] not found. 出现这个错误,不是log4j的问题,也是slf4j的问题,问题是因为自 ...
- Spark算子--SortBy
转载请标明出处http://www.cnblogs.com/haozhengfei/p/39edcbb10b5076599c0e5609b7136b88.html SortBy--Transforma ...
- Oracle:对用户的CREATE、ALTER、GRANT、REVOKE操作练习
--创建一个用户yong2,yong2的表空间为users,临时表空间为temp,users的表空间大小为10M,密码立刻过期,用户锁定. CREATE USER yong2IDENTIFIED BY ...
- myeclipse中git的使用
1.右键项目,team-->commit,勾选修改了的文件,点击commit(将更新提交到本地仓库)2.右键项目,team-->pull,合并本地仓库和远程服务器仓库,pull后有一些文件 ...
- vuejs中执行npm run dev出现页面cannot GET/问题
1.问题描述 最近用vue-cli搭建了一个小项目,其中在对项目进行打包测试时修改了webpack.base.conf.js中的配置信息,之后再用npm run dev之后出现如下的情况: 最近又有网 ...
- 微信小程序实现顶部、底部联动滑动
这个场景一般用于展示数据时,数据过多,每条一行显示不下,表头可以横向滑动,下面要显示的数据部分横向纵向都可以滑动.表头或下面数据部分横向滑动的时候,两部分可以进行联动 具体效果像这样(随便写的丑样式布 ...
- JVM内存划分简介
参考:深入理解JAVA虚拟机(第二版)
- shell 实现主板测试
初接触shell,只能需要用到什么功能现学先用了.本文总结一下完成测试程序当中遇到的技巧和问题. 01. 变量生存期的问题,在函数中的变量无法在其他地方使用,在函数中只能使用在函数前定义的全局变量: ...