前言

前面寫過一篇ionic3使用HttpModule來進行網(wǎng)絡請求的文章穗泵，ionic3開發(fā)之封裝Http請求（支持傳入對象和數(shù)組）。現(xiàn)在ionic3中更流行使用HttpClientModule來進行網(wǎng)絡請求绞呈，所以在上一篇文章的基礎上面進行改造。

GET請求

簡單的get請求赊抖，把所有的參數(shù)拼接到url上吊履，和原來的方式?jīng)]有差別肤晓。

constructor(public http: HttpClient) {
}

this.http.get(url).subscribe(res => {
      // 成功收到response
    }, error => {
      // 請求發(fā)生錯誤
    }
)

POST請求

發(fā)起post請求爷贫，需要配合HttpParams才可以實現(xiàn)。使用HttpParams的時候要注意這里有一個坑补憾。

let httpParams = new HttpParams().set("param1" : 1)
                                 .set("param2" : 2)漫萄；

像這樣子鏈式調(diào)用set方法是沒有問題的，可以把所有的參數(shù)都帶進去盈匾。

let httpParams = new HttpParams();
httpParams.set("param1" : 1);
httpParams.set("param1" : 1);

像這樣子調(diào)用set方法腾务，后面set的參數(shù)會覆蓋前面的參數(shù)，導致最后只有一個參數(shù)削饵，其他參數(shù)全沒了岩瘦。

好在HttpParams的構造方法里提供了兩種方式去構造參數(shù)
1.new HttpParams({fromString: "param1=1&param2=2"})
2.new HttpParams({fromObject: {param1 : 1, param2 : 2}})

private encodeHttpParams(params: any): any {
  if (!params) return null;
  return new HttpParams({fromObject: params});
}

var params = {
  param1: 1,
  param2: 2
};

this.http.post(url, this.encodeHttpParams(params))
  .subscribe(res => {
    // 成功收到response
  }, error => {
    // 請求發(fā)生錯誤
  }
);

傳入對象、數(shù)組參數(shù)

如果僅僅只需要傳入一些簡單的參數(shù)窿撬，到上面就已經(jīng)可以實現(xiàn)了启昧。但是如果要傳入一些復雜的參數(shù)，比如數(shù)組劈伴、對象參數(shù)密末，使用new HttpParams({fromObject: paramsObj})是無法完成任務的。

所以只能想辦法把復雜的參數(shù)按照相應的規(guī)則拼接起來跛璧，然后使用new HttpParams({fromString: complexParamsString})來實現(xiàn)严里。

當然，我們使用get發(fā)起請求的時候也可以不用先在url上拼接參數(shù)追城，也可以將參數(shù)以HttpParams的方式傳入刹碾。

// 將復雜的參數(shù)組裝成字符串
private paramsString(params: any): string {

  if (!params) return null;

  let str = "";

  for (let key in params) {
    if (params.hasOwnProperty(key)) {
    let value = params[key];
    if (value === null) continue;

    if (Array.isArray(value)) {
      if (value.length === 0) continue;

      for (let index = 0; index < value.length; index++) {
        let k = key + "[" + index + "]";
        let v = value[index];
        if (str.length > 1) str += "&";
        str += k + "=" + v;
      }
    } else if (isObject(value)) {

      for (let subKey in value) {
        if (value.hasOwnProperty(subKey)) {
          let v = value[subKey];
          if (v === null) continue;

          let k = key + "[" + subKey + "]";
          if (str.length > 1) str += "&";
          str += k + "=" + v;
        }
      }

      } else {
        if (str.length > 1) str += "&";
        str += key + "=" + value;
      }
    }
  }
  return str;
}

private encodeComplexHttpParams(params: any): any {
  if (!params) return null;
  return new HttpParams({fromString: this.paramsString(params)});
}

封裝GET、POST請求

GET(url: string, params: any, callback ?: (res: any, error: any) => void): void {

  this.http.get(url, {params: this.encodeComplexHttpParams(params)})
    .subscribe(res => {
      callback && callback(res, null);
    }, error => {
      callback && callback(null, error);
    }
  );

}

POST(url: string, params: any, callback ?: (res: any, error: any) => void): void {

  this.http.post(url, this.encodeComplexHttpParams(params))
    .subscribe(res => {
      callback && callback(res, null);
    }, error => {
      callback && callback(null, error);
    });
}

使用示例：

var params = {
  param1 : 1,
  param2 : [a, b],
  param3 : {
  child :  "c"
  }
}
var url = "http://www.domain.com/api"
GET(url, params, (res, err)=>{
  if (err){
    // 網(wǎng)絡請求出現(xiàn)錯誤
  }

  if (res) {
    // 網(wǎng)絡請求成功
  } 
})