欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular8 Http拦截器简单使用教程

程序员文章站 2022-06-25 12:56:40
拦截器 http拦截器就是拦截发出的请求,对其进行统一添加额外处理,然后放行;对响应进行拦截并作出业务上的判断,决定是否给与返回。 先看一组常见的业务请求:...

拦截器

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拦截器简单使用教程,希望对大家有所帮助