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的更多相关文章

  1. Angular Multiple HTTP Requests with RxJS

    原文:https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs ----------------------------- ...

  2. [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 ...

  3. angular源码分析:angular中脏活累活的承担者之$interpolate

    一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...

  4. angular源码分析:angular中入境检察官$sce

    一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...

  5. angular的跨域(angular百度下拉提示模拟)和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  6. angular源码分析:angular的整个加载流程

    在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...

  7. angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了

    一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...

  8. angular源码分析:angular的源代码目录结构说明

    一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...

  9. angular源码分析:angular中各种常用函数,比较省代码的各种小技巧

    angular的工具函数 在angular的API文档中,在最前面就是讲的就是angular的工具函数,下面列出来 angular.bind //用户将函数和对象绑定在一起,返回一个新的函数 angu ...

随机推荐

  1. ChinaVis2015 第一天会议

    第二届  ChinaVis 2015 在天津举行,非常幸运发现者个会议,并在导师的带领下參与本次会议. 主要要是以可视化与可视分析为背景进行讲座,以马匡六为Speaker.袁晓如,张加万等致辞开幕式. ...

  2. 【推荐】适合本科生的网络公开课(MOOC为主),不断更新……

    题记:身在海大(湛江),是幸运还是不幸,每一个人有自己的定义.人生不能再来一次,唯有把握当下.提高自己,才可能在不能拼爹的年代靠自身实力前行.或许,我们做不了富二代.但我们每一个人.都有机会成为富二代 ...

  3. SAP学习之路

    此贴记录学习SAP过程~如有错误请指出~ 6.看着网上学习SAP的貌似比較花精力.学习好的话发展前景还是不错的 5.尽管还不是非常懂.可是还是充满期待,期待着java转型abap. 能够在虚拟机上安装 ...

  4. leetCode 85.Maximal Rectangle (最大矩阵) 解题思路和方法

    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and ...

  5. Deep Networks : Overview

    Overview In the previous sections, you constructed a 3-layer neural network comprising an input, hid ...

  6. Gym 100952 F. Contestants Ranking

    http://codeforces.com/gym/100952/problem/F F. Contestants Ranking time limit per test 1 second memor ...

  7. 程序中为什么会使用while(0)

    https://blog.csdn.net/u012062760/article/details/46446207 关于while(0)实际上是用来宏定义的,这样的宏定义可以避免调用的时候出错. 如下 ...

  8. vue prpos

    匹配某些值中的一个 type: { validator: function(value) { return ["success", "warning", &qu ...

  9. Easy mock - 安装配置和基本使用

    Easy-mock easy-mock是一款比较好用的接口模拟工具, 使用之前我们需要安装和配置 需要下载的内容有以下 Node Redis MongoDB Node和Redis一路点下一步就行, M ...

  10. watch---周期性的方式执行给定的指令

    watch命令以周期性的方式执行给定的指令,指令输出以全屏方式显示. 选项 -n:指定指令执行的间隔时间(秒): -d:高亮显示指令输出信息不同之处: -t:不显示标题.