詳解封裝基礎(chǔ)的angular4的request請求方法

為什么要封裝呢？

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

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

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

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

希望封裝成什么樣呢？

當(dāng)然是越少重復(fù)的代碼越好，我們就是想偷懶?。?！!

怎么實(shí)現(xiàn)呢？

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

需求A

1.請求方式為get。

2.默認(rèn)的請求超時(shí)時(shí)間為3秒，可傳入別的超時(shí)時(shí)間。

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

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

錯(cuò)誤時(shí)這樣：

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

實(shí)現(xiàn)A

request.service.ts

/**
 ********************************************************************************************
 * @App: test
 * @author: isiico
 * @type: service
 * @src: services/request.service.ts
 *
 * @descriptions:
 * 請求的服務(wù)
 *
 ********************************************************************************************
 */
// 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; // 默認(rèn)的超時(shí)時(shí)間

  constructor(private http:HttpClient) {
  }
  
   /** 獲取數(shù)據(jù)
    * param: url  string   必填,請求的url
    *     time  number   可不填,請求的超時(shí)時(shí)間,如不填,默認(rèn)為setTimeout
    * return:    Observable HttpClient的get請求，請求完成后返回的值類型是any
    **/
   public getData(url, time = this.setTimeout):Observable<any> {
    let thiUrl = url; // 用到的url
    let thisTime = time; // 用到的超時(shí)時(shí)間
    return this.http.get(thiUrl)
       .timeout(thisTime)
       .map(res => this.resFun(res));
   }

   /** 返回?cái)?shù)據(jù)的處理
    * param:  data   any   必填,需要處理的數(shù)據(jù)
    * return:  res   any   返回處理后的值
    **/
   private resFun(data:any):any {
    let thisData:any = data; // 需要處理的值
    let res:any; // 最終值

    // 當(dāng)status為200時(shí)
    if (thisData['status'] == 200) {
       res = thisData['data']; // 給最終值賦值
    } else {
    // 當(dāng)status不為200時(shí)
      let err = thisData['msg']; // 錯(cuò)誤信息
      throw new Error(err); // 拋出錯(cuò)誤
    }
    return res; // 返回最終值
   }
}

需求B

1.為了安全，后臺要求請求的頭需要加上Authorization參數(shù)。

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

實(shí)現(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   可不填,請求的超時(shí)時(shí)間,如不填,默認(rèn)為setTimeout
    * return:    Observable HttpClient的get請求，請求完成后返回的值類型是any
    **/
   public getData(url, time = this.setTimeout):Observable<any> {
    let thiUrl = url; // 用到的url
    let options = {}; // 請求的設(shè)置
    let thisTime = time; // 用到的超時(shí)時(shí)間
    this.addAuthorization(options); // 請求頭里添加Authorization參數(shù)
    return this.http.get(thiUrl, options)
       .timeout(thisTime)
       .catch(this.httpErrorFun) // 處理錯(cuò)誤信息(必須放在timeout和map之間)
       .map(res => this.resFun(res));
   }

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

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

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

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

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

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

完整的request service 代碼

request.service.ts

/**
 ********************************************************************************************
 * @App: test
 * @author: isiico
 * @type: service
 * @src: services/request.service.ts
 *
 * @descriptions:
 * 請求的服務(wù)
 *
 ********************************************************************************************
 */
// 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; // 默認(rèn)的超時(shí)時(shí)間

  constructor(private http:HttpClient) {
  }

   /** 添加Authorization的屬性 */
   private addAuthorization(options:any):void {
    options['headers'] = {
       'Authorization': '1drf5dg4d7s4w7z',
    };
   }
  
   /** 獲取數(shù)據(jù)
    * param: url  string   必填,請求的url
    *     time  number   可不填,請求的超時(shí)時(shí)間,如不填,默認(rèn)為setTimeout
    * return:    Observable HttpClient的get請求，請求完成后返回的值類型是any
    **/
   public getData(url, time = this.setTimeout):Observable<any> {
    let thiUrl = url; // 用到的url
    let options = {}; // 請求的設(shè)置
    let thisTime = time; // 用到的超時(shí)時(shí)間
    this.addAuthorization(options); // 請求頭里添加Authorization參數(shù)
    return this.http.get(thiUrl, options)
       .timeout(thisTime)
       .catch(this.httpErrorFun) // 處理錯(cuò)誤信息(必須放在timeout和map之間)
       .map(res => this.resFun(res));
   }

   /** 返回?cái)?shù)據(jù)的處理
    * param:  data   any   必填,需要處理的數(shù)據(jù)
    * return:  res   any   返回處理后的值
    **/
   private resFun(data:any):any {
    let thisData:any = data; // 需要處理的值
    let res:any; // 最終值

    // 當(dāng)status為200時(shí)
    if (thisData['status'] == 200) {
       res = thisData['data']; // 給最終值賦值
    } else {
    // 當(dāng)status不為200時(shí)
      let err = thisData['msg']; // 錯(cuò)誤信息
      throw new Error(err); // 拋出錯(cuò)誤
    }
    return res; // 返回最終值
   }

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

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

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

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

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

    return Observable.throw(res);
   }
}

小結(jié)

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

調(diào)用

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

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 = ''; // 列表請求的錯(cuò)誤信息
  
  constructor(private req: RequestService) {
  }
  
  /** 獲取list */
  getList(){
    this.listErrMsg = ''; // 清空錯(cuò)誤信息

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

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

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

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

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

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

廣告

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

h5響應(yīng)式網(wǎng)站建設(shè)