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. 利用gradle加入构建版本

    在java的程序中,貌似都没有这个构建版本的概念.用的诸如eclipse. idea和android studio的IDE也没有直接提供构建版本的选项.只是我却想在android程序的版本其中加入一个 ...

  2. Android NDK课程录制完毕上线

    近期依据公司安排,录制了Android NDK开发的内容,总体课程能够在www.iotekclass.com上看到.兴许会慢慢的用blog把这些内容展示出来. 此课程大纲例如以下: 第一章 NDK简单 ...

  3. 【Oracle】使用bbed恢复delete的数据

    表中的数据被delete之后并不会真正删除数据,而是打了一个删除标记,仅仅要还没有被覆盖就能够恢复回来. 实验步骤例如以下: SYS@ORCL>create table bbed_test(x  ...

  4. UICollectionView——整体总结

    前言 这几天有时间看了下UICollectionView的东西,才发觉它真的非常强大,很有必要好好学习学习.以前虽然用过几次,但没有系统的整理总结过.这两天我为UICollectionView做一个比 ...

  5. kafka自带没web ui界面,怎么办?安装个第三方的

    见 基于Web的Kafka管理器工具之Kafka-manager的编译部署详细安装 (支持kafka0.8.0.9和0.10以后版本)(图文详解)(默认端口或任意自定义端口)  

  6. ElasticSearch 应用场景

    主要分为如下几点: 1.站内搜索:主要和 Solr 竞争,属于后起之秀. 2.NoSQL Json文档数据库:主要抢占 Mongo 的市场,它在读写性能上优于 Mongo ,同时也支持地理位置查询,还 ...

  7. API(Application Programming Interface,应用程序编程接口)

    API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码 ...

  8. 开始刷SGU

    计划一天3题 请监督我 谢谢

  9. 【2017 Multi-University Training Contest - Team 5】Rikka with Graph

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6090 [Description] 给你n个点; 让你在这n个点上最多连m条无向边; 使得 ∑ni= ...

  10. 在Google Drive上建立免费静态站点

    现今建立一个属于自己的站点已经是一件非常普遍和简单的事情了. 你能够选择买空间,买域名.你也能够使用免费空间.免费域名.你能够选择动态的php wordpress,joomla或者是静态的站点(如使用 ...