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 相关文章推荐
onpropertypchange
Jul 01 Javascript
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
chrome调试javascript详解
Oct 21 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
Vue.js实现分页查询功能
Nov 15 Javascript
深入解读Node.js中的koa源码
Jun 17 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
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python获取多线程及子线程的返回值
2017/11/15 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
linux面试题参考答案(3)
2012/09/13 面试题
年度考核自我评价
2014/01/25 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
面试通知邮件
2015/04/20 职场文书
捐书仪式主持词
2015/07/04 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python