极乐门资源网 Design By www.ioogu.com
拦截器
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拦截器简单使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无Angular8 Http拦截器简单使用教程的评论...
更新日志
2024年12月27日
2024年12月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]