Angular8 Http拦截器简单使用基础指南_http入门知识

拦截器Http拦截器就是拦截发出的请求,对其进行统一添加额外处理,然后放行;对响应进行拦截并作出业务上的判断,决定是否给与返回。先看一组常见的业务请求:this.http.post(‘http://127.0.0.1:8080/api/getList’, {header: {token: ‘asdasdas’},observe: ‘body’,params:

Angular8 Http拦截器简单使用基础指南

拦截器

Http拦截器就是拦截发出的请求,对其进行统一添加额外处理,然后放行;对响应进行拦截并作出业务上的判断,决定是否给与返回。
先看一组常见的业务请求:

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 }

拦截器根据业务复杂度,其内容也随着复杂,通常管理下共通的配置,核心是处理各类异常,甚至错误码处理。

海计划公众号
(0)
上一篇 2020/03/26 23:30
下一篇 2020/03/26 23:30

您可能感兴趣的内容

  • 如何保持学习编程的动力基础入门_编程菜鸟知识

    学编程现在看起来挺简单,因为网上有丰富的各种资源。然而当你实际去学的时候就发现,还是很难!对我来说也一样。但从某天起,我决定认认真真学编程一年。后来又过了一年,又过了一年又一年……我好像有点感悟。如果你曾致力于学习一些重要的东西,就会知道在漫长的艰难时刻保持自己的积极性是多么困难。你怎么做呢?我说下我的经验:1. 去开发点真东西不要只一味地跟着教程学。它们有

    2020/03/30
  • 前端部署和提效:从静态到node再到负载均衡小白入门_部署小白攻略

    前言相信很多前端同学对 vue 或 react 的开发很熟悉了,也知道如何去打包生成一个生产环境的包,但对于生产环境的部署可能有些同学了解比较少。小公司可能都是后端帮忙部署了,大公司会有专门的运维同学部署,对于生产环境的部署工作有些同学接触的不多,所以这次来分享和总结下前端项目部署相关的实战经验:从静态站点的部署,到 node 项目的部署,再到负载均衡的部署

    2020/03/20
  • 什么时候不使用箭头函数?新手入门_箭头函数菜鸟教程

    这些年来,ES6 将 JS 的可用性提升到一个新的水平时: 箭头函数、类等等,这些都很棒。箭头函数是最有价值的新功能之一,有很多好文章描述了它的上下文透明性和简短的语法。但每个事务都有两面。通常,新特性会带来一些混乱,其中之一就是箭头函数被误导了。本文将介绍一些场景,在这些场景中,你应该绕过箭头函数,转而使用良好的旧函数表达式或较新的简写语法。并且要注意缩短

    2020/03/29
  • QQ/微信里域名经常被举报二屏蔽?微信/QQ屏蔽域名举报按钮的实现方式基础入门_微信菜鸟教程网

    近很多老哥问我,为啥自己的域名在QQ/微信里面很容易被封?1、页面里面的内容违规或者诱导被举报而导致的拦截2、用户和同行举报3、腾讯等定期会检查4、有诱导分享,强制关注等针对每一种出现的情况,都有不同的防封策略。不是说一种方案就可以解决全部。你首先要知道你的域名是什么原因被封的,在作出相应的选择针对!下面我们就开始针对每种情况我们该出出的对应选择!我就按照情

    2020/03/26
  • javascript怎么禁止输入汉字?小白攻略_字体菜鸟指南

    JavaScript禁止中文输入可以通过设置输入框的css样式的ime-mode属性来实现。也可以通过控制输入字符来禁止输入中文。.方法一、JavaScript通过控制css样式来禁止输入中文。ime:InputMethodEditors输入法编辑器。ime-mode是CSS非标准属性,用来控制文本输入法的状态,仅在部分浏览器支持或支持程度不一样。ime-m

    2020/03/20
  • 用TypeScript弥补Elm和JavaScript之间的差距基础知识入门_TypeScript小白指南

    近些日子,我使用了新语言编程,从JavaScript,切确地说是Elm,转成TypeScript。写过一篇文章解释了我为什么选择TypeScript作为我的前端语言。在本文中,我将继续深挖一些我非常喜欢的TypeScript特性。联合类型–更好地表达数据在我短暂使用Elm编程的过程中,越来越喜欢联合类型这个特性。让我们探究这个特性,看它是怎么让Elm和Ty

    2020/04/05
  • Tabulator菜鸟指南_ JavaScript 中的交互式图表和数据网格

    Tabulator菜鸟指南 官方网址:http://tabulator.info GitHub:https://github.com/olifolkerd/tabulator 简介…

    2020/03/06
  • 小程序下拉刷新入门基础知识_刷新入门攻略

    在小程序中onLoad生命钩子只在页面创建时调用一次,在做navigateTo页面跳转后,返回上级页面,由于navigateTo跳转只是隐藏了当前页面,因此返回上一级页面时onLoad生命钩子不会再次执行,这样带来的好处是页面能快速展示出来,但是onLoad中的请求数据不会实时更新,这时候就需要一个下拉刷新的操作来帮助用手动更新页面数据,接下来这篇文章将会介

    2020/03/24
  • 水印项目的实现以及两种实现方案的选优入门基础教程_项目小白常识

    水印项目我们提出了两种解决方案一、用shadow dom实现1、基本思路通过 attachShadow 这个方法生成一个shadow root 即shadow的根节点,然后在这个根节点下面通过循环语句添加水印,利用position为absolute进行排版,使其铺满容器 show me the code:(function (root, factory) {

    2020/03/29
  • magnificent.js小白帮助一款响应式jQuery图片放大镜插件

    magnificent.js基础入门 官方网址:https://andrz.me/magnificent.js/examples/demo/ GitHub:https://gith…

    2020/03/05
  • 程序员电影,荧屏里的程序员形象小白攻略_程序员入门基础知识

    大量的计算机编程中涉及到的概念都被运用到了电影里。有些概念出现在电影里后变得如此之酷,甚至反过来能帮助我们程序员更好的理解这些概念。今天就来给大家推荐一下荧屏里的程序员形象,感受一下戏里的程序员有多高能吧!我的美女老板 一个常常失业游戏程序员和富二代的恋情,出身草根的小程序员王宇(齐奎饰),默默承担着供妹妹读大学和贴补家用的重担,事业和爱情都一无起色。一场

    2020/03/30
  • 采用微服务架构的六个考量因素小白知识_微服务入门百科

    新兴技术的下一波浪潮正向我们涌来,人工智能、可穿戴设备、物联网及更多技术变得普及开来。许多组织现面临着管理这些整体式应用程序这个难题。当下,速度和灵活性必不可少。Netflix、Twitter、eBay和亚马逊等大型互联网公司采用的下一个架构创新是微服务。据互联网服务器供应商NGINX声称,68%的组织在使用或调查这种方法。微服务架构正在IT行业备受追捧,因

    2020/03/26
  • 项目常用eslint配置(Vue/React/TypeScript)小白指南_eslint使用指南

    项目常用eslint配置(Vue/React/TypeScript)小白指南 记录一下常用的eslint配置。 Vue项目常用eslint配置 需要安装依赖(Vue这里使用stan…

    2020/03/19
  • DAG:区块链行业下一个引爆点?小白知识_区块链基础知识入门

    何为DAGDAG是Directed Acyclic Graph的缩写,是一种运用拓扑排序的直接图像数据结构。这种数据结构能够在数据压缩中找到最优解,因此在实际中被广泛地运用于数据处理等领域。总体而言,DAG结构中的每个节点通过一个具有特定方向的edge连接在一起,以此来排除任何回路的可能性。因此,DAG可以直观地理解为一个没有回路的有向图。DAG的原理在DA

    2020/03/23
  • 打一个通用UMD包入门攻略_umd入门基础

    有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端。客户端提供一个纯粹的 JS 执行引擎,不需要 WebView 容器。iOS 端有成熟的 JavaScriptCore、Android 可以使用 V8 引擎。这样一个引擎配套有一个 SDK,访问 Native 的基础能力和数据运

    2020/03/20
  • http访问控制(CORS)教程视频_资源小白基础

    前言前后端分离会带有很多优势,也是当今开发的主流方向,但是也会有些小问题,比如跨域。那什么是跨域呢?很简单的,比如,我在开源中国去访问百度的资源,那就是跨域,只要资源提供方和当前地址不一致就是跨域请求,具体说来就是域名或者ip+port发生了变化。这种机制是浏览器出于安全机制的角度而产生的,防止资源盗窃等行为。所以前后端分开就必须解决这个问题了。2. 跨域解

    2020/03/22