这篇文章主要介绍了Angular8 Http拦截器简单使用教程，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
拦截器
Http拦截器就是拦截发出的请求，对其进行统一添加额外处理，然后放行；对响应进行拦截并作出业务上的判断，决定是否给与返回。
先看一组常见的业务请求：
this.http.post('http://127.0.0.1<a style="color:transparent">来源gao($daima.com搞@代@#码网</a>: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, next: HttpHandler): Observable { // 先补全请求协议 let url = req.url; const needToken = ignoreToken.filter(u => url.match(u)); if (url.indexOf('http://') { 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拦截器简单使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
以上就是Angular8 Http拦截器简单使用教程的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Angular8 Http拦截器简单使用教程
转载请注明原文链接：Angular8 Http拦截器简单使用教程
