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三个关闭弹出层的小示例
Nov 05 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 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批量删除数据
2007/01/18 PHP
改变Apache端口等配置修改方法
2008/06/05 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
vue实现搜索功能
2019/05/28 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
python正则分组的应用
2013/11/10 Python
Python读取键盘输入的2种方法
2015/06/16 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python生成密码库功能示例
2017/05/23 Python
python实现八大排序算法(1)
2017/09/14 Python
深入浅析Python中的迭代器
2019/06/04 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
离职报告范文
2014/11/04 职场文书
2014年度工作总结报告
2014/12/15 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书