Angular2--拦截器服务

前言

   最近小编做的一个有关Angular的项目，这是一个前端的项目，在项目的最后需要用到后端提供的接口来实现前端和后端的交互，这个时候就用到了拦截器服务。下面咱们就具体的了解一下拦截器服务是什么吧。

叙述

背景需求

  1.项目开发、测试、发布使用的后台发布接口均不一致，根据不同环境配置接口的host+port

  2.全局处理非正确的response

什么是拦截器

   拦截器服务，它能声明一些拦截器，拦在应用和后端之间。当应用程序发起一个请求时，拦截器可以在请求被发往服务器之前先转换这个请求。并且在应用看到服务器发回来的响应之前，转换这个响应。这对于处理包括认证和记录日志在内的一系列工作都非常有用。

拦截器的具体实现

（1）要实现一个拦截器，就要声明一个实现了HttpInterceptor接口的类，它只有一个intercept()方法。实现我们要添加一个公共的服务

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 {
  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 > {
    //console.log("before...");
    //根据不同的生产环境配置http前缀
    console.log(url);
    typeof url=='string'? (url='https://virtserver.swaggerhub.com/Library/Andior/1.0.0/'+url):(url.url='https://virtserver.swaggerhub.com/Library/Andior/1.0.0/'+url.url);
    return this.intercept(super.request(url, options));
  }
  get(url: string, options ? : RequestOptionsArgs): Observable < Response > {
    return this.intercept(super.get(url, options));
  }
  post(url: string, body: string, options ? : RequestOptionsArgs): Observable < Response > {
    return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
  }
  put(url: string, body: string, options ? : RequestOptionsArgs): Observable < Response > {
    return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
  }
  delete(url: string, options ? : RequestOptionsArgs): Observable < Response > {
    return this.intercept(super.put(url, this.getRequestOptionArgs(options)));
  }
  getRequestOptionArgs(options ? : RequestOptionsArgs): RequestOptionsArgs {
    if (options == null) {
      options = new RequestOptions();
    }
    if (options.headers == null) {
      options.headers = new Headers();
    }
    options.headers.append('Content-Type', 'application/json');
    return options;
  }
  intercept(observable: Observable < Response > ): Observable < Response > {
    //console.log("after...");
    return observable.catch((err, source) => {
      if (err.status<200 || err.status>=300) {
        alert('网络错误:'+err.status+' - '+this.status['status.'+err.status]);
        return Observable.empty();
      } else {
        return Observable.throw(err);
      }
    });
  }
}

释：intercept是一个方法，它把一个请求对象转换成一个返回这个响应的可观察对象（Observable）。从这个意义上说，每个拦截器都要完全自己处理这个请求
（2）在自己的主页面中引用拦截器服务

（3）具体使用拦截器服务

以 student-manager 页面为例（在student-manager.component.ts中使用拦截器服务）

小结

     好了，今天有关拦截器的服务就到这里了，由于小编也是刚开始接触Angular，对于拦截器了解的也不是很透彻，所以欢迎大神们的指导哦。