[Angular] Intercept HTTP requests in Angular
Being able to intercept HTTP requests is crucial in a real world application. Whether it is for error handling and logging or for injecting authentication tokens. While in Angular version 2 it intercepting HTTP requests was totally possible, implementing it wasn't that trivial and intuitive. Starting from Angular version 4.3.1 there is a new, way more simpler approach of implementing HTTP interceptors. In this lesson we're going to explore how.
http.intercept.ts:
import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpResponse,
HttpErrorResponse,
HttpHandler,
HttpEvent
} from '@angular/common/http'; import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw'; @Injectable()
export class MyHttpLogInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('processing request', request); const customReq = request.clone({
headers: request.headers.set('app-language', 'it')
}); return next
.handle(customReq)
.do((ev: HttpEvent<any>) => {
if (ev instanceof HttpResponse) {
console.log('processing response', ev);
}
})
.catch(response => {
if (response instanceof HttpErrorResponse) {
console.log('Processing http error', response);
} return Observable.throw(response);
});
}
}
Register:
@NgModule({
imports: [ BrowserModule, HttpClientModule ],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: MyHttpLogInterceptor, multi: true }
],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
[Angular] Intercept HTTP requests in Angular的更多相关文章
- Angular Multiple HTTP Requests with RxJS
原文:https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs ----------------------------- ...
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- angular源码分析:angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
- angular源码分析:angular的源代码目录结构说明
一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...
- angular源码分析:angular中各种常用函数,比较省代码的各种小技巧
angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angu ...
随机推荐
- 41.Node.js使用cnpm
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html npm是Node.js中维护第三方库.模块的工具,但是国外的速度很悲剧,这里有一个中国的源cn ...
- PDF Adobe Acrobat 9 简体中文专业版(打印店内部的软件)(你懂的!)
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- Android Studio 解决unspecified on project app resolves to an APK archive which is not supported
出现该问题unspecified on project app resolves to an APK archive which is not supported as a compilation d ...
- recyclerview23+出现多个item只显示第一个item的问题
1.改成21+可以,如果不行,就使用第2或第3个解决方案 2.对每个item的inflate,传入两个参数,第二个参数设置为null,而不是使用3个参数(第二个parent,第三个false) 3.i ...
- Json应用案例
Json应用案例之FastJson 这几天在网上找关于Json的一些案例,无意当中找到了一个我个人感觉比较好的就是阿里巴巴工程师写的FastJson. package com.jerehedu.f ...
- 搭建Disuz论坛社区
认证:http://.qcloud.com/event/try 网站的性能容量规划通用网站架构:CVM+CDB,可选CDN+Redis+COS http://www.8n8k.com/first-we ...
- 给网站设置ICO图标
方法一: 直接在站点根目录下放入名为:favicon.ico 的图标文件(必须要为 ICO 文件,BMP 及其他格式的图片文件不行).还有将 favicon.ico 中的 favico ...
- kali之Nmap (Network Mapper(网络映射器)
Nmap是主机扫描工具,他的图形化界面是Zenmap,分布式框架为Dnamp. Nmap可以完成以下任务: 主机探测 端口扫描 版本检测 系统检测 支持探测脚本的编写 Nmap在实际中应用场合如下: ...
- 三分钟上手Highcharts简易甘特图
根据业务需求,找到了这个很少使用的图形,话不多说,看看该如何使用.首先要引入支持文件:可根据链接下载. exporting.js:https://img.hcharts.cn/highcharts/m ...
- 从硬件到语言,详解C++的内存对齐(memory alignment)(一)
作者:赵宗晟 出处:https://www.cnblogs.com/zhao-zongsheng/p/9099603.html 很多写C/C++的人都知道“内存对齐”的概念以及规则,但不一定对他有很深 ...