angular cli http请求封装+拦截器配置+ 接口配置文件

1、接口配置文件

app.api.ts

import { Component, OnInit } from '@angular/core';
/**
 * 接口配置文件
 * baseurl
 * urlList
 */
export class apiList implements OnInit {
  baseurl: any = '';
  urlList: any = {};
  constructor() { 
    this.baseurl = 'http://127.0.0.1';
    this.urlList =  {
      'login': {
        path: '/login',
        params: {
          username: '',
          password: ''
        }
      },
      'getUser': {
        path: '/getUser',
        params: {
          id: ''
        }
      }
    }
  }
  ngOnInit() {}
}

上面模拟定义了两个接口

2、http请求封装

app.service.ts

import { Component, Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import {apiList} from './app.api';  // 引入api配置文件

@Component({
  providers:[apiList]
})

@Injectable()
export class selfHttp {
  public restServer;
  public http;
  status = {
    '0': '请求超时，请检查网络是否断开或者链接是否正确',
    "400": "错误的请求。由于语法错误，该请求无法完成。",
    "401": "未经授权。服务器拒绝响应。",
    "403": "已禁止。服务器拒绝响应。",
    "404": "未找到。无法找到请求的位置。",
    "405": "方法不被允许。使用该位置不支持的请求方法进行了请求。",
    "406": "不可接受。服务器只生成客户端不接受的响应。",
    "407": "需要代理身份验证。客户端必须先使用代理对自身进行身份验证。",
    "408": "请求超时。等待请求的服务器超时。",
    "409": "冲突。由于请求中的冲突，无法完成该请求。",
    "410": "过期。请求页不再可用。",
    "411": "长度必需。未定义“内容长度”。",
    "412": "前提条件不满足。请求中给定的前提条件由服务器评估为 false。",
    "413": "请求实体太大。服务器不会接受请求，因为请求实体太大。",
    "414": "请求 URI 太长。服务器不会接受该请求，因为 URL 太长。",
    "415": "不支持的媒体类型。服务器不会接受该请求，因为媒体类型不受支持。",
    "416": "HTTP 状态代码 {0}",
    "500": "内部服务器错误。",
    "501": "未实现。服务器不识别该请求方法，或者服务器没有能力完成请求。",
    "503": "服务不可用。服务器当前不可用(过载或故障)。"
  };

  constructor(Http: HttpClient, public api: apiList) {
    console.log(this.api.baseurl);
    this.http = Http;
    this.restServer = this.api.baseurl;
  }

  public get(url, params?: Object, cb?: Function) {
    this.msg(url);
    let httpParams = new HttpParams();
    const vm = this;
    if (params) {
      for (const key in params) {
        if (params[key] === false || params[key]) {
          httpParams = httpParams.set(key, params[key]);
        }
      }
    }
    vm.http.get(vm.restServer + url, { params: httpParams })
      .subscribe(data => {
        cb(data);
      },(err)=>{
        console.log(this.status[err.status]);
      });
  }

  public post(url, data?: Object, cb?: Function, options?: Object) {
    this.msg(url);
    const vm = this;
    vm.http.post(vm.restServer + url, data, options)
      .subscribe(res => {
        cb(res);
      }, (err) => {
        console.log(err);
        console.log(this.status[err.status]);
       }, () => {
         //...请求完成
       }
      );
  }

  public put(url, data?: Object, cb?: Function, options?: Object) {
    this.msg(url);
    const vm = this;
    vm.http.put(vm.restServer + url, data, options)
      .subscribe(res => {
        cb(res);
      },(err)=>{
        console.log(this.status[err.status]);
      });
  }

  public delete(url, params?: Object, cb?: Function) {
    this.msg(url);
    let httpParams = new HttpParams();
    const vm = this;
    if (params) {
      for (const key in params) {
        if (params[key]) {
          httpParams = httpParams.set(key, params[key]);
        }
      }
    }
    vm.http.delete(vm.restServer + url, { params: httpParams })
      .subscribe(data => {
        cb(data);
      },(err)=>{
        console.log(this.status[err.status]);
      });
  }
  public msg(url) {
    console.log('/*')
    console.log(' **开始请求',url)
    console.log(' */')
  }
}

上面定义了几个请求的函数，已经提示信息的函数。

app.module.ts注入

import {apiList} from './common/app.api';
.
.
..
providers: [httpInterceptorProviders, apiList],

 

example.ts

import { Component, OnInit } from '@angular/core';
import { HttpHeaders } from '@angular/common/http';
import { selfHttp } from 'src/app/common/app.service';
import {apiList} from '../common/app.api';  // 引入
@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css'],
  providers:[selfHttp, apiList]
})
export class ArticleComponent implements OnInit {
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'my-auth-token'
    })
  };
  data: any;
  constructor(public http: selfHttp, public api: apiList) {
    console.log(this.api);
  }

  ngOnInit() {
    this.http.post(this.api.urlList.login.path, {username: 1, password:22, other:1113}, res => {
      console.log('结果', res);
    }, this.httpOptions);

  }
}

 

然后访问的话就会

 

2、拦截器

app.myintercept.ts

/**
 * 拦截器验证token
 */
import { Injectable } from '@angular/core';
import {HttpInterceptor, HttpHandler, HttpRequest, HttpEvent,} from '@angular/common/http';
import { Router } from '@angular/router';
import { Observable,  } from 'rxjs';
import {apiList} from './app.api'

@Injectable()
export class InterceptorService implements HttpInterceptor {
    
    constructor( public router: Router,  public api: apiList) { 
        // localStorage.setItem('access_token', 'xxxxxxxxxxxxx')
    };
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let authReq: any;
        // 实现第一次不拦截的方式：1. 指定接口不拦截  2. 判断本地localStorage
        let loginUrl = this.api.baseurl + this.api.urlList['login']['path'];
        if (req.url !== loginUrl) {
            if (localStorage.getItem('access_token')) {
                // console.log(2);
                const token = localStorage.getItem('access_token');
                authReq = req.clone({ setHeaders: { token } });
                return next.handle(authReq);
            } else {
                // 未登录  ==  access_token
                this.router.navigate(['/login']);
            }
        }
        authReq = req.clone({ setHeaders: {} });
        return next.handle(authReq);
    }
    
}

上面请求会验证是否有token，没有就跳转到登录页面。

定义拦截器收集文件

http-intercepts/index.ts

/**
 * 拦截器 收集
 * barrel
 */
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { InterceptorService } from '../app.myIntercept';

export const httpInterceptorProviders = [
    { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true },
];

app.module.ts注入

import {httpInterceptorProviders} from 'src/app/common/http-interceptors/index'
.
.
.
.
providers: [httpInterceptorProviders, apiList],

现在如果进入页面请求，没有带token的话就会自动跳转到登录页面。