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

为什么要封装呢？

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

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

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

希望封装成什么样呢？

当然是越少重复的代码越好，我们就是想偷懒！！！!

怎么实现呢？

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

需求A

1.请求方式为get。

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

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

{  "status": 200,  "data"  : ...}

错误时这样：

{  "status": 201,  "msg"  : "用户名或密码错误"}

实现A

request.service.ts

/** ******************************************************************************************** * @App: test * @author: isiico * @type: service * @src: services/request.service.ts * * @descriptions: * 请求的服务 * ******************************************************************************************** */// Angular Coreimport {Injectable} from '@angular/core';import {HttpClient} from '@angular/common/http';// rxjsimport {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; // 返回最终值   }}