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实现以post打开新窗口
Mar 19 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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递归创建和删除文件夹的代码小结
2012/04/13 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python标准库sched模块使用指南
2017/07/06 Python
快速了解python leveldb
2018/01/18 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
区级文明单位申报材料
2014/05/15 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
年度考核表个人总结
2015/03/06 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript