Angular8 Http拦截器简单使用教程

 更新时间:2019年08月20日 13:43:15   作者:何弃疗  
这篇文章主要介绍了Angular8 Http拦截器简单使用教程,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

拦截器

Http拦截器就是拦截发出的请求,对其进行统一添加额外处理,然后放行;对响应进行拦截并作出业务上的判断,决定是否给与返回。

先看一组常见的业务请求:

this.http.post('http://127.0.0.1:8080/api/getList', {
   header: {
    token: 'asdasdas'
   },
   observe: 'body',
   params: {
    pageSize: 10,
    pageIndex: 1
   },
   responseType: 'json',
   withCredentials: true
  });

可以看出有些配置是几乎所有请求都共通得,有的需要token等参数,一个项目全部手动写得话,第一容易漏写,第二以后如果有改动,需要所有接口都调整,不利于维护,最理想得状态就是只修改参数和api地址,其他得交给特别得机制去处理,这就引出了今天的主角-HttpInterceptor

定义拦截器

按照官方约定,文件应该是以‘.interceptor.ts'作为后缀

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
const ignoreToken = ['login', 'logout', 'table'];
@Injectable()
export class CommonInterceptor implements HttpInterceptor {
 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 先补全请求协议
  let url = req.url;
  const needToken = ignoreToken.filter(u => url.match(u));
  if (url.indexOf('http://') < 0 || url.indexOf('https://') < 0) {
   url = 'http://' + url;
  }
  // 过滤掉不需要token的请求
  if (!needToken.length) {
   req = req.clone({
    url
   });
  } else {
   req = req.clone({
    url,
    headers: req.headers.set('token', 'asdqwe')
   });
  }
  return next.handle(req).pipe(
   tap(
    event => {
     if (event instanceof HttpResponse) {
      console.log(event);
      if (event.status >= 500) {
       // 跳转错误页面
      }
     }
    },
    error => {
     // token过期 服务器错误等处理
    })
  );
 }
}

组件:

getTemp() {
  this.http.post('172.16.10.161:3000/table', {
   params: {
    pageSize: 10,
    pageIndex: 1
   }
  }).subscribe(res => {
   console.log(res);
  });
 }

该拦截器实现的功能比较简单,但是结构算是完整的,和管道类似,想应用此拦截器需要注入在app模块,

在providers数组种添加

{ provide: HTTP_INTERCEPTORS, useClass: CommonInterceptor, multi: true }

拦截器根据业务复杂度,其内容也随着复杂,通常管理下共通的配置,核心是处理各类异常,甚至错误码处理。

总结

以上所述是小编给大家介绍的Angular8 Http拦截器简单使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • AngularJS实现自定义指令及指令配置项的方法

    AngularJS实现自定义指令及指令配置项的方法

    这篇文章主要介绍了AngularJS实现自定义指令及指令配置项的方法,结合实例形式简单总结分析了AngularJS自定义指令及指令配置项的实现技巧,需要的朋友可以参考下
    2017-11-11
  • AngulerJS学习之按需动态加载文件

    AngulerJS学习之按需动态加载文件

    本篇文章主要介绍了AngulerJS学习之按需动态加载文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • AngularJS入门教程之ng-checked 指令详解

    AngularJS入门教程之ng-checked 指令详解

    本文主要讲解AngularJS ng-checked 指令,在这整理ng-checked 指令的基础知识,并附代码实例,有需要的小伙伴可以参考下
    2016-08-08
  • 如何在Angular8.0下使用ngx-translate进行国际化配置

    如何在Angular8.0下使用ngx-translate进行国际化配置

    这篇文章主要介绍了如何在Angular8.0下使用ngx-translate进行国际化配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • angular4自定义组件非input元素实现ngModel双向数据绑定的方法

    angular4自定义组件非input元素实现ngModel双向数据绑定的方法

    这篇文章主要介绍了angular4自定义组件非input元素实现ngModel双向数据绑定的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 详解Angular的8个主要构造块

    详解Angular的8个主要构造块

    Angular 主要分为八大构造块(也就是八个核心概念):模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下
    2017-06-06
  • Angular 4环境准备与Angular cli创建项目详解

    Angular 4环境准备与Angular cli创建项目详解

    Angular4.0来了,更小,更快,改动少,所以下面这篇文章主要给大家介绍了关于Angular 4环境准备与学会使用Angular cli创建项目的相关资料,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-05-05
  • Angular ng-repeat 对象和数组遍历实例

    Angular ng-repeat 对象和数组遍历实例

    这篇文章主要介绍了Angular ng-repeat对象和数组遍历的相关资料,并附代码示例,需要的朋友可以参考下
    2016-09-09
  • AngularJS压缩JS技巧分析

    AngularJS压缩JS技巧分析

    这篇文章主要介绍了AngularJS压缩JS的操作技巧,分析了AngularJS进行压缩(minify)之后出现的问题与相应的解决方法,需要的朋友可以参考下
    2016-11-11
  • Angular X中使用ngrx的方法详解(附源码)

    Angular X中使用ngrx的方法详解(附源码)

    ngrx是一套利用RxJS的类库,下面这篇文章主要给大家介绍了关于Angular X中使用ngrx的方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07

最新评论