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 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
js Math 对象的方法
Sep 01 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
使用vue for时为什么要key【推荐】
Jul 11 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短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
php实现对象克隆的方法
2015/06/20 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python实现list由于numpy array的转换
2018/04/04 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python yield关键词案例测试
2019/10/15 Python
Django ModelForm操作及验证方式
2020/03/30 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
开天辟地观后感
2015/06/09 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS