為什么要封裝呢？

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; // 返回最終值   }}