詳解封裝基礎的angular4的request請求方法

為什么要封裝呢？

站在用戶的角度思考問題，與客戶深入溝通，找到福鼎網(wǎng)站設計與福鼎網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、虛擬主機、企業(yè)郵箱。業(yè)務覆蓋福鼎地區(qū)。

angular4自身提供的請求方法是用Observable來實現(xiàn)的。用的是觀察者模式，個人認為這用來寫請求是非常方便的。

一個項目里會有非常多的不同的請求，但是其實每個請求都會有些共性。比如：每個請求都要傳Authorization，比如每個請求都要先判斷后臺返回的status字段為200時才是請求成功，后臺正真返回的數(shù)據(jù)在data字段里，比如對于錯誤信息的處理都是一樣的......等等。

所以我們需要封裝出一個請求，去統(tǒng)一處理這些問題，從而保證組件里調(diào)用請求方法的時候收到的值都是可以直接拿來用的，幾乎不用再寫些重復的代碼。

希望封裝成什么樣呢？

當然是越少重復的代碼越好，我們就是想偷懶?。?！!

怎么實現(xiàn)呢？

首先先新建一個請求的service，文件名為：request.service.ts。然后跟著我來虛擬需求，一步一步的慢慢來完善這個service。

需求A

1.請求方式為get。

2.默認的請求超時時間為3秒，可傳入別的超時時間。

3.后臺返回的成功的json為這樣：

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

錯誤時這樣：

{
  "status": 201,
  "msg"  : "用戶名或密碼錯誤"
}

實現(xiàn)A

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';

@Injectable()
export class RequestService {
  private setTimeout = 3000; // 默認的超時時間

  constructor(private http:HttpClient) {
  }
  
   /** 獲取數(shù)據(jù)
    * 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));
   }

   /** 返回數(shù)據(jù)的處理
    * param:  data   any   必填,需要處理的數(shù)據(jù)
    * 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參數(shù)。

2.當請求失?。ㄈ?04，500這種）時，處理好錯誤信息，最后的錯誤信息要像實現(xiàn)A 里一樣，是可以直接用的字符串類型的錯誤信息。

實現(xiàn)B

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

import 'rxjs/add/operator/catch';

@Injectable()
export class RequestService {

   /** 添加Authorization的屬性 */
   private addAuthorization(options:any):void { 
    options['headers'] = { 
       'Authorization': '1drf5dg4d7s4w7z', 
    }; 
   } 
  
   /** 獲取數(shù)據(jù)
    * 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參數(shù)
    return this.http.get(thiUrl, options)
       .timeout(thisTime)
       .catch(this.httpErrorFun) // 處理錯誤信息(必須放在timeout和map之間)
       .map(res => this.resFun(res));
   }

  /** 對請求錯誤信息的處理
    * param:  err  any  必填,需要處理的錯誤信息
    * return:  res  string 處理后的結(jié)果
    **/
   public httpErrorFun(err:any):string { /* new */
    let res:string = ''; // 處理后的結(jié)果 /* new */
    let data:any = err; // 需要處理的值 /* new */

    /** 后臺有返回錯誤信息時 */
    if (data.hasOwnProperty('error') && data.hasOwnProperty('message')) { /* new */
       res = data.message; /* new */

     /** 后臺沒有返回錯誤信息只有錯誤名時 */
    } else if (data.hasOwnProperty('name')) { /* new */
       let errName = data.name; /* new */

     /** 請求超時 */
     if (errName == 'TimeoutError') { /* new */
      res = '對不起，請求超時了'; /* new */
     }

     /** 后臺返回未授權時 */
    } else if (data == "Unauthorization") { /* new */
       res = '您沒有權限，請重新登錄' /* new */
      } else {
       res = "哎呀，不知道是啥錯誤~~"; /* new */
    }

    return Observable.throw(res); /* new */
   }
}

完整的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',
    };
   }
  
   /** 獲取數(shù)據(jù)
    * 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參數(shù)
    return this.http.get(thiUrl, options)
       .timeout(thisTime)
       .catch(this.httpErrorFun) // 處理錯誤信息(必須放在timeout和map之間)
       .map(res => this.resFun(res));
   }

   /** 返回數(shù)據(jù)的處理
    * param:  data   any   必填,需要處理的數(shù)據(jù)
    * 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:  res  string 處理后的結(jié)果
    **/
   public httpErrorFun(err:any):string {
    let res:string = ''; // 處理后的結(jié)果
    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);
   }
}

小結(jié)

至此，我們已經(jīng)完成了一個滿足基本需求的，可以公共使用的請求服務，接下來我們來看怎么在組件內(nèi)調(diào)用。

調(diào)用

我們有個叫l(wèi)ist的組件，要調(diào)用get請求，請求成功顯示數(shù)據(jù)，請求失敗，顯示錯誤信息。

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>; // 列表數(shù)據(jù)(類型為數(shù)組)
  listErrMsg: string = ''; // 列表請求的錯誤信息
  
  constructor(private req: RequestService) {
  }
  
  /** 獲取list */
  getList(){
    this.listErrMsg = ''; // 清空錯誤信息

    // 發(fā)送請求
    this.req.getData(this.cabinetListApi)
       .subscribe(
      res=>{
      // 請求成功
        this.cabinets = [];
        this.cabinets = res;
       },err=>{
      // 請求失敗
        this.cabinets = [];
        this.listErrMsg = err;
     })

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

頁面的顯示自己去完成吧！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：詳解封裝基礎的angular4的request請求方法
文章鏈接：http://m.rwnh.cn/article44/ipgpee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、自適應網(wǎng)站、網(wǎng)站排名、Google、移動網(wǎng)站建設、網(wǎng)站導航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

詳解封裝基礎的angular4的request請求方法