Angular8 Http拦截器简单使用教程


Posted in Javascript onAugust 20, 2019

拦截器

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拦截器简单使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
vue 实现购物车总价计算
Nov 06 Javascript
vue实现axios图片上传功能
Aug 20 #Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 #Javascript
vue+element-ui+axios实现图片上传
Aug 20 #Javascript
vue element upload实现图片本地预览
Aug 20 #Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 #Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 #Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 #Javascript
You might like
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python三元运算实现方法
2015/01/12 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
幼儿园家长寄语
2014/04/02 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
高中政治教学反思
2016/02/23 职场文书