angular2拦截器服务

前言

早该总结的博客一直拖着没有及时总结，发现错失了很多东西，总归我还是想起来了！补补把！，我写的这篇博客是程序运行的顺序，所以非常直观易懂

---

What 拦截器

光听名字相信大家也可以知道个大概把，拦截器就是把某个东西给拦截了！这就是他的功能。运用在angular2中的拦截器其实道理是一样，拦截器英文名字（Interceptor）在我们程序执行相应动作的代码前拦截器用于在某个方法或者字段被访问之前进行拦截，然后再后面加上某些操作，做到这的时候你肯定会感觉拦截器跟过滤一样，其实是不一样的！具体我也不太清楚，~~

---

Why 拦截器

其实拦截器起到了一个直观重要的位置，因为在图书馆项目的时候，我们的地址有的是来自基础的，有的是自己写的，如果不对那就跟后台的swagger连不上，所以就导致出不来数据，所以这个时候拦截器就出来了，当我程序运行的时候拦截器首先会把他拦住然后选择相应的地址，这样我们就可以走的正确的地址，就出现数据了，

---

How 拦截

拦截器其实非常好用，只要引进服务和http请求机制便可以使用。首先必须有httpProvider他提供了一个数组interceptors，这个数组是接受拦截器服务注册，通过注册最终会形成拦截器链

---

1.引用拦截器服务

2、引入之后进行实例化，跟后台的思想一样，如果你想这个东东必须首先实例化在赋值（一样的原理）

3.引用完之后，我们需要使用http进行与后台交互，红色框表示我们的与后台交互的地址，橘色框表示我们的请求为get类型

橘色框表示我们的请求的方式，跟ajax是请求是一样的针对不同的请求也有不同的处理方式，我跟大家分享一下

• get请求：主需要传进去url地址就可以

let URl="" //存放地址
this.http.get(url).topromise().then(
res=>{}
)

• post请求：把Url地址传进去和body传进去，两个参数

let URl="" //存放地址
this.http.get(url，body).topromise().then(
res=>{}

• put请求：把Url地址传进去

let URl="" //存放地址
this.http.post(url).topromise().then(
res=>{}
)

• delete请求：把Url地址传进去和body

let URl="" //存放地址
this.http.post(url，body).topromise().then(
res=>{}
)

---

4当运行到里的时候我们绘制我们的http中get的请求调到我们的HttpInterceptorService服务中，这一步分代码就是我们使用的code码，就是后台返给我们的code码，然后我们对应code码给用户显示相应的信息，再往下就是我们的重点拦截的内容，（http地址去掉了为了隐私）根据不同的地址我们找到不同的接口。

import { Injectable } from '@angular/core';
import { Http, Request, RequestOptionsArgs, Response, RequestOptions, ConnectionBackend, Headers } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class HttpInterceptorService extends Http {
   // 定义后端的fastdsf的路径
  public  readonly  fastDsfUrl = "http://192.168.22.192/";
  status = {
    "status.400": "错误的请求。由于语法错误，该请求无法完成。",
    "status.401": "未经授权。服务器拒绝响应。",
    "status.403": "已禁止。服务器拒绝响应。",
    "status.404": "未找到。无法找到请求的位置。",
    "status.405": "方法不被允许。使用该位置不支持的请求方法进行了请求。",
    "status.406": "不可接受。服务器只生成客户端不接受的响应。",
    "status.407": "需要代理身份验证。客户端必须先使用代理对自身进行身份验证。",
    "status.408": "请求超时。等待请求的服务器超时。",
    "status.409": "冲突。由于请求中的冲突，无法完成该请求。",
    "status.410": "过期。请求页不再可用。",
    "status.411": "长度必需。未定义“内容长度”。",
    "status.412": "前提条件不满足。请求中给定的前提条件由服务器评估为 false。",
    "status.413": "请求实体太大。服务器不会接受请求，因为请求实体太大。",
    "status.414": "请求 URI 太长。服务器不会接受该请求，因为 URL 太长。",
    "status.415": "不支持的媒体类型。服务器不会接受该请求，因为媒体类型不受支持。",
    "status.416": "HTTP 状态代码 {0}",
    "status.500": "内部服务器错误。",
    "status.501": "未实现。服务器不识别该请求方法，或者服务器没有能力完成请求。",
    "status.503": "服务不可用。服务器当前不可用(过载或故障)。"
  };
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }
  request(url: string | Request, options ? : RequestOptionsArgs): Observable < Response > {

    //根据不同的生产环境配置http前缀
    // console.log(url);
    // typeof url=='string'? (url='https://virtserver.swaggerhub.com/Library/Andior/1.0.0/'+url):(url.url='https:
    if(typeof url == "string"){
      let str = url.substring(0,url.indexOf("/"));
      switch (str){
      case "authorityManagement-web":
      url = url.replace("authorityManagement-web","http://");
      break;
      case "basicInfo-web":
      url = url.replace("basicInfo-web","http://192.168.22.202:8080/basicInfo-web");
      break;
      default:
       url = "http:

      break;
      }
      }else{
      let str = url.url.substring(0,url.url.indexOf("/"));
      switch (str){
      case "authorityManagement-web":
      url.url = url.url.replace("authorityManagement-web","http:");
      break;
      case "basicInfo-web":
      url.url = url.url.replace("basicInfo-web","http:8.");
      break;
      default:
      url.url = "" + url.url;
      break;
      }
      }   
  }

其实这个服务还定义了我们的post和get，delet等请求方式，在上面写的的请求就是来自这里的

---

总结

拦截器服务给我们带啦的就是方便，解决了很多问题，拦截器是有组长来写的，组员只需要引进服务就可以，所以增加了代码的复用性！这样是angualr2非常好的机制！由于体现在模块化！后续我会讲解什么是模块化