Angular8 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拦截器简单使用教程，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Angularjs注入拦截器实现Loading效果

    Angularjs注入拦截器实现Loading效果

    angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果烦回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类. 什么是拦截器? $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂.下面的例子告诉你怎么创建一个拦截器: <!-- lang: js --> module.factory('myInterceptor', ['$log', function($log) {

  • 详解AngularJs HTTP响应拦截器实现登陆、权限校验

    $httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们希望俘获响应,并且在完成完成调用之前处理它.一个很好例子就是处理全局 http 异常.拦截器(Interceptors)应运而生.本文将介绍 AngularJS 的拦截器,并且给几个有用的例子. 什么是拦截器? $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一

  • 快速学习AngularJs HTTP响应拦截器

    任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途径. 四种拦截器 实现 request 方法拦截请求 request: function(config) { // do something on request success return config || $q.when(config); } 该方法会在 $http 发送请求后台之前执行,因

  • angular 用拦截器统一处理http请求和响应的方法

    想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去,也就是{headres:{'token':1}} index.html里引入以下js: angular.module('app.factorys',[]) .factory('httpInterceptor',['$q','$injector','$localStorage',function ($q,$injector,$localStorage) { var httpInterc

  • AngularJS使用拦截器实现的loading功能完整实例

    本文实例讲述了AngularJS使用拦截器实现的loading功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge

  • 浅析AngularJs HTTP响应拦截器

    为何要用拦截器? 任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途径.  拦截器允许你: 通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行,因此你可以修改配置或做其他的操作.该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise

  • angular中的http拦截器Interceptors的实现

    在angularJs中增加了一个对全局的http请求统一做出处理的api--interceptors Interceptors 有两个处理时机,分别是: 其它程序代码执行 HTTP 请求之后,在实际从浏览器发出请求之前,即处理请求 得到请求的响应之后,在交给其它程序代码处理之前,即处理请求的响应 其引用场景包括 全局处理错误 统一进行身份验证一类的处理 对所有发出去的请求进行预处理 对所有收到的响应进行预处理等等 使用实例如下: commonService.config(['$httpProvi

  • Angular8 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', withCre

  • spring boot的拦截器简单使用示例代码

    1.spring boot拦截器默认有: HandlerInterceptorAdapter AbstractHandlerMapping UserRoleAuthorizationInterceptor LocaleChangeInterceptor ThemeChangeInterceptor 其中 LocaleChangeInterceptor 和 ThemeChangeInterceptor 比较常用. 2.实现自定义拦截器只需要3步: 1).创建我们自己的拦截器类并实现 Handler

  • springboot自定义拦截器简单使用及举例

    目录 1. 自定义拦截器 2. 拦截器登录验证的小demo 2.1 配置pom.xml 2.2 创建User的bean组件 2.3 创建需要的表单页面以及登录成功的页面 2.4 编写controller映射关系 2.5 自定义拦截器类,实现intercepetor接口 2.6注册添加拦截器,自定义springboot配置类 2.7 运行测试 总结 1. 自定义拦截器 在springboot中,使用自定义拦截器,只需要将类实现HandlerIntercepter接口(与原生的filter也基本差不

  • 详解flutter之网络请求dio，请求，拦截器简单示例

    flutter一直很火的网络请求插件dio 直接上代码,写成一个类,可以直接使用 包含请求的封装,拦截器的封装 import 'package:dio/dio.dart'; import 'dart:async'; import 'dart:io'; import './apidomain.dart'; import './httpHeaders.dart'; import 'package:shared_preferences/shared_preferences.dart'; class D

  • SpringBoot快速设置拦截器并实现权限验证的方法

    一.概述 拦截器的使用场景越来越多,尤其是面向切片编程流行之后.那通常拦截器可以做什么呢? 之前我们在Agent介绍中,提到过统计函数的调用耗时.这个思路其实和AOP的环绕增强如出一辙. 那一般来说,场景如下: 函数增强:比如对一个函数进行参数检查,或者结果过滤等.甚至可以对函数就行权限认证. 性能监控:统计函数性能. 日志打点:比如在用户登录函数之前,打点统计PV等信息. 以及其他等等. 二.Spring的拦截器 无论是SpringMVC或者SpringBoot中,关于拦截器不得不提: org

  • mybatis拦截器及不生效的解决方法

    目录 背景: mybatis拦截器怎样做 定义一个拦截器 定义一个 MybatisInterceptorAutoConfiguration 背景: 在一些需求下,使用拦截器会大大简化工作量也更加灵活: 在项目中,要更新数据表的审计字段,比如 create_time, creator, update_time, updator, 这些字段,如果每一个表对应的mapper 都去写一次,或每一个方法都去更新一下,这个工作量非常大并且不太友好,并且不够优雅. 记录一些日志,比如执行sql时侯,要打印每一

  • Executor拦截器高级教程QueryInterceptor的规范

    Executor 拦截器高级教程 - QueryInterceptor 规范 这篇文档涉及下面几个方面 1. Executor query 方法介绍 2. 拦截器配置和调用顺序 3. 拦截 query 方法的技巧 4. 拦截 query 方法的规范 5. 如何配置不同的 Executor 插件 1. Executor query 方法介绍 在 MyBatis 的拦截器的文档部分,我们知道 Executor 中的 query 方法可以被拦截,如果你真正写过这个方法的拦截器,你可能会知道在 Exec

  • Java的Struts2框架中拦截器使用的实例教程

    Java的Struts2框架中拦截器使用的实例教程

    1.拦截器小介 拦截器的功能类似于web.xml文件中的Filter,能对用户的请求进行拦截,通过拦截用户的请求来实现对页面的控制.拦截器是在Struts-core-2.2.3.jar中进行配置的,原始的拦截器是在struts-default.xml中配置的,里面封存了拦截器的基本使用方法. Struts2拦截器功能类似于Servlet过滤器.在Action执行execute方法前,Struts2会首先执行struts.xml中引用的拦截器,如果有多个拦截器则会按照上下顺序依次执行,在执行完所有

  • iOS 9 更新之Safari广告拦截器（Content Blocker）开发教程

    iOS 9 更新之Safari广告拦截器（Content Blocker）开发教程

    下面通过图文并茂的方式给大家分享下这方面的知识,具体内容如下. 相对于谷歌对广告拦截的禁止,苹果与之态度截然相反,继Mac版Safari加入广告拦截工具之后,即将到来的iOS9对Safari也引入了内容拦截插件-Content Blocker,并且开发者可以使用最新的Xcode7开发以及使用iOS 9模拟器进行调试,下面,笔者将用一个简单的实例进行讲解如何开发Content Blocker. 在使用Google搜索时,排行靠前面的几条永远都是广告项,比如搜索"iPhone6",得到的结

  • 防止未登录用户操作—基于struts2拦截器的简单实现

    一般,我们的web应用都是只有在用户登录之后才允许操作的,也就是说我们不允许非登录认证的用户直接访问某些页面或功能菜单项.我还记得很久以前我的做法:在某个jsp页面中查看session中是否有值(当然,在用户登录逻辑中会将用户名或者用户对象存入session中),如果session中用户信息为空,那么redirect 到登录页面.然后在除了登录页面外的其它所有需要验证用户已登录的页面引入这个jsp . 比如,我们将检查用户是否登录的代码放入一个jsp页面中,如 checkUser.jsp <%@

随机推荐