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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
js实现日历
Nov 07 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
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
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
asm.js使用示例代码
2013/11/28 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
详解js类型判断
2018/05/22 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
layui--js控制switch的切换方法
2019/09/03 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
Python如何将模块打包并发布
2020/08/30 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
零件设计自荐信范文
2013/11/27 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
爱的教育观后感
2015/06/17 职场文书
青年志愿者活动感想
2015/08/07 职场文书
感恩的心主题班会
2015/08/12 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python