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 EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
JavaScript简介
Feb 15 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
python实现反转部分单向链表
2018/09/27 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python生成随机红包的实例写法
2019/09/02 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
30年同学聚会感言
2014/01/30 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
婚前保证书
2014/04/29 职场文书
培训科主任岗位职责
2014/08/08 职场文书
从事会计工作年限证明
2015/06/23 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server