Angular8 Http拦截器简单使用

更新日期: 2019-08-15阅读: 3.2k标签: 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 }

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


链接: https://www.fly63.com/article/detial/4774

HTTPS 常见部署问题及解决方案

到任何有关部署 HTTPS 或 HTTP/2 的问题,都推荐先用 Qualys SSL Labs SSL Server Test 跑个测试,大部分问题都能被诊断出来。

HTTP请求头和响应头部包括的信息有哪些【HTTP请求头各字段解释】

每个HTTP请求和响应都会带有相应的头部信息。默认情况下,在发送XHR请求的同时,还会发送下列头部信息: Accept、Accept-Charset、Accept-Encoding、Connection、Host

服务器响应常用状态码及含义_ajax请求中http返回的状态码大全

HTTP状态码是用以表示网页服务器HTTP响应状态的3位数字代码,其中第一位数字表示响应类别,响应类别从1到5分为五种,分别代表:临时响应、成功、重定向、请求错误、服务器错误。

HTTPS 如何保证数据传输的安全性

在客户端与服务器数据传输的过程中,HTTP协议的传输是不安全的,也就是一般情况下HTTP是明文传输的。但HTTPS协议的数据传输是安全的,也就是说HTTPS数据的传输是经过加密的

http协议的发展历史

在最早的时候,第一个定稿的http协议是http/0.9版本,在这个版本里面,http协议,它的内容,非常非常的简单 只有一个命令。http协议的历史,其中当然还有https,https是http的安全版本,它实际使用的内容跟http/1.1没有很大的区别

axios 模块化封装_对axios的二次封装的实现

Axios 是一个基于 promise 的 HTTP 库 ,使用了axios来进行数据的请求,一般都需要我们对它进行封装处理。下面简单介绍下如何对axios的二次封装的实现,以及在vue中的使用。

HttpClient的3种超时

设置ConnectionPoolTimeout:这定义了从ConnectionManager管理的连接池中取出连接的超时时间,此处设置为1秒。设置ConnectionTimeout:这定义了通过网络与服务器建立连接的超时时间。Httpclient包中通过一个异步线程去创建与服务器的socket连接

HTTP 请求头中的 Remote_Addr,X-Forwarded-For,X-Real-IP

X-Forwarded-For一般是每一个非透明代理转发请求时会将上游服务器的IP地址追加到X-Forwarded-For的后面,使用英文逗号分割;X-Real-IP一般是最后一级代理将上游IP地址添加到该头中;X-Forwarded-For是多个IP地址,而X-Real-IP是一个

HTTP协议中的短轮询、长轮询、长连接和短连接

HTTP协议是基于请求/响应模式的,因此只要服务端给了响应,本次HTTP连接就结束了,根本没有长连接这一说。网络上说HTTP分为长连接和短连接,其实本质上是说的TCP连接。TCP连接是一个双向的通道,它是可以保持一段时间不关闭的,因此TCP连接才有真正的长连接和短连接这一说。

常见HTTP请求错误码

一些常见的状态码为:200 - 服务器成功返回网页;404 - 请求的网页不存在;503 - 服务不可用。1xx(临时响应):表示临时响应并需要请求者继续执行操作的状态代码。2xx (成功):表示成功处理了请求的状态代码。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!