封装基础的angular4的request请求方法

时间 2019-11-08

标签封装基础 angular4 angular request 请求方法栏目软件设计繁體版

原文原文链接

为何要封装呢？

angular4自身提供的请求方法是用Observable来实现的。用的是观察者模式，我的认为这用来写请求是很是方便的。html

一个项目里会有很是多的不一样的请求，可是其实每一个请求都会有些共性。好比：每一个请求都要传Authorization，好比每一个请求都要先判断后台返回的status字段为200时才是请求成功，后台正真返回的数据在data字段里，好比对于错误信息的处理都是同样的......等等。typescript

因此咱们须要封装出一个请求，去统一处理这些问题，从而保证组件里调用请求方法的时候收到的值都是能够直接拿来用的，几乎不用再写些重复的代码。json

但愿封装成什么样呢？

固然是越少重复的代码越好，咱们就是想偷懒！！！! api

怎么实现呢？

首先先新建一个请求的service，文件名为：request.service.ts。而后跟着我来虚拟需求，一步一步的慢慢来完善这个service。数组

需求A

1.请求方式为get。安全

2.默认的请求超时时间为3秒，可传入别的超时时间。angular4

3.后台返回的成功的json为这样：this

{

    "status": 200,

    "data"   : ...

}

错误时这样：url

{

    "status": 201,

    "msg"   : "用户名或密码错误"

}

实现A

request.service.tsspa

/**
 ********************************************************************************************
 * @App: test
 * @author: isiico
 * @type: service
 * @src: services/request.service.ts
 *
 * @descriptions:
 * 请求的服务
 *
 ********************************************************************************************
 */
// Angular Core
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

// rxjs
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/observable/throw';

@Injectable()
export class RequestService {
    private setTimeout = 3000;  // 默认的超时时间

    constructor(private http:HttpClient) {
    }
    
      /** 获取数据
       * param:  url    string      必填,请求的url
       *         time   number      可不填,请求的超时时间,如不填,默认为setTimeout
       * return:        Observable  HttpClient的get请求，请求完成后返回的值类型是any
       **/
      public getData(url, time = this.setTimeout):Observable<any> {
        let thiUrl = url;  // 用到的url
        let thisTime = time;  // 用到的超时时间
        return this.http.get(thiUrl)
              .timeout(thisTime)
              .map(res => this.resFun(res));
      }

      /** 返回数据的处理
       *  param:    data     any     必填,须要处理的数据
       *  return:   res      any     返回处理后的值
       **/
      private resFun(data:any):any {
        let thisData:any = data;  // 须要处理的值
        let res:any;  // 最终值

        // 当status为200时
        if (thisData['status'] == 200) {
              res = thisData['data']; // 给最终值赋值
        } else {
        // 当status不为200时
            let err = thisData['msg'];  // 错误信息
            throw new Error(err);  // 抛出错误
        }
        return res;  // 返回最终值
      }
}

需求B

1.为了安全，后台要求请求的头须要加上Authorization参数。

2.当请求失败（如404，500这种）时，处理好错误信息，最后的错误信息要像 实现A 里同样，是能够直接用的字符串类型的错误信息。

实现B

request.service.ts （只展现新增的代码，完整代码后面有）

import 'rxjs/add/operator/catch';

@Injectable()
export class RequestService {

      /** 添加Authorization的属性 */
      private addAuthorization(options:any):void { 
        options['headers'] = { 
              'Authorization': '1drf5dg4d7s4w7z', 
        }; 
      } 
    
      /** 获取数据
       * param:  url    string      必填,请求的url
       *         time   number      可不填,请求的超时时间,如不填,默认为setTimeout
       * return:        Observable  HttpClient的get请求，请求完成后返回的值类型是any
       **/
      public getData(url, time = this.setTimeout):Observable<any> {
        let thiUrl = url;  // 用到的url
        let options = {};  // 请求的设置
        let thisTime = time;  // 用到的超时时间
        this.addAuthorization(options);  // 请求头里添加Authorization参数
        return this.http.get(thiUrl, options)
              .timeout(thisTime)
              .catch(this.httpErrorFun)  // 处理错误信息(必须放在timeout和map之间)
              .map(res => this.resFun(res));
      }

    /** 对请求错误信息的处理
   *  param:    err                 any                 必填,须要处理的错误信息
   *  return:   Observable.throw    Observable<string>  string:处理后显示的错误文字
   **/
      public httpErrorFun(err:any):Observable<string> {  
        let res:string = '';  // 处理后的结果
        let data:any = err;  // 须要处理的值

        /** 后台有返回错误信息时 */
        if (data.hasOwnProperty('error') && data.hasOwnProperty('message')) {
              res = data.message;

          /** 后台没有返回错误信息只有错误名时 */
        } else if (data.hasOwnProperty('name')) {
              let errName = data.name;

          /** 请求超时 */
          if (errName == 'TimeoutError') {
            res = '对不起，请求超时了';
          }

          /** 后台返回未受权时 */
        } else if (data == "Unauthorization") {
              res = '您没有权限，请从新登陆';
            } else {
              res = "哎呀，不知道是啥错误~~";
        }

        return Observable.throw(res);
      }
}

完整的request service 代码

request.service.ts

/**
 ********************************************************************************************
 * @App: test
 * @author: isiico
 * @type: service
 * @src: services/request.service.ts
 *
 * @descriptions:
 * 请求的服务
 *
 ********************************************************************************************
 */
// Angular Core
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

// rxjs
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';

@Injectable()
export class RequestService {
    private setTimeout:number = 3000;  // 默认的超时时间

    constructor(private http:HttpClient) {
    }

      /** 添加Authorization的属性 */
      private addAuthorization(options:any):void {
        options['headers'] = {
              'Authorization': '1drf5dg4d7s4w7z',
        };
      }
    
      /** 获取数据
       * param:  url    string      必填,请求的url
       *         time   number      可不填,请求的超时时间,如不填,默认为setTimeout
       * return:        Observable  HttpClient的get请求，请求完成后返回的值类型是any
       **/
      public getData(url, time = this.setTimeout):Observable<any> {
        let thiUrl = url;  // 用到的url
        let options = {};  // 请求的设置
        let thisTime = time;  // 用到的超时时间
        this.addAuthorization(options);  // 请求头里添加Authorization参数
        return this.http.get(thiUrl, options)
              .timeout(thisTime)
              .catch(this.httpErrorFun)  // 处理错误信息(必须放在timeout和map之间)
              .map(res => this.resFun(res));
      }

      /** 返回数据的处理
       *  param:    data     any     必填,须要处理的数据
       *  return:   res      any     返回处理后的值
       **/
      private resFun(data:any):any {
        let thisData:any = data;  // 须要处理的值
        let res:any;  // 最终值

        // 当status为200时
        if (thisData['status'] == 200) {
              res = thisData['data']; // 给最终值赋值
        } else {
        // 当status不为200时
            let err = thisData['msg'];  // 错误信息
            throw new Error(err);  // 抛出错误
        }
        return res;  // 返回最终值
      }

    /** 对请求错误信息的处理
   *  param:    err                 any                 必填,须要处理的错误信息
   *  return:   Observable.throw    Observable<string>  string:处理后显示的错误文字
   **/
      public httpErrorFun(err:any):Observable<string> {
        let res:string = '';  // 处理后的结果
        let data:any = err;  // 须要处理的值

        /** 后台有返回错误信息时 */
        if (data.hasOwnProperty('error') && data.hasOwnProperty('message')) {
              res = data.message;

          /** 后台没有返回错误信息只有错误名时 */
        } else if (data.hasOwnProperty('name')) {
              let errName = data.name;

          /** 请求超时 */
          if (errName == 'TimeoutError') {
            res = '对不起，请求超时了';
          }

          /** 后台返回未受权时 */
        } else if (data == "Unauthorization") {
              res = '您没有权限，请从新登陆';
            } else {
              res = "哎呀，不知道是啥错误~~";
        }

        return Observable.throw(res);
      }
}

小结

至此，咱们已经完成了一个知足基本需求的，能够公共使用的请求服务，接下来咱们来看怎么在组件内调用。

调用

咱们有个叫list的组件，要调用get请求，请求成功显示数据，请求失败，显示错误信息。

list.component.ts

/**
 ********************************************************************************************
 * @App: test
 * @author: isiico
 * @type: component
 * @src: components/list.component.ts
 *
 * @descriptions:
 * list组件
 *
 ********************************************************************************************
 */
// Angular Core
import { Component, OnInit } from '@angular/core';

// Services
import { RequestService } from "../services/request.service";

@Component({
  moduleId: module.id,
  templateUrl: 'list.component.html'
})

export class ListComponent implements OnInit {
    listApi = '/assets/mock-data/list.json';  // 列表的api地址
    list:Array<any>;  // 列表数据(类型为数组)
    listErrMsg: string = '';  // 列表请求的错误信息
    
    constructor(private req: RequestService) {
    }
    
    /** 获取list */
    getList(){
        this.listErrMsg = '';  // 清空错误信息

        // 发送请求
        this.req.getData(this.cabinetListApi)
              .subscribe(
            res=>{
            // 请求成功
                this.cabinets = [];
                this.cabinets = res;
              },err=>{
            // 请求失败
                this.cabinets = [];
                this.listErrMsg = err;
          })

      }
    
    ngOnInit() {
        this.getList();
      }
}

页面的显示本身去完成吧！