ionic3开发之HttpClient POST（支持传入对象和数组参数）

前言

前面写过一篇ionic3使用HttpModule来进行网络请求的文章，ionic3开发之封装Http请求（支持传入对象和数组）。现在ionic3中更流行使用HttpClientModule来进行网络请求，所以在上一篇文章的基础上面进行改造。

GET请求

简单的get请求，把所有的参数拼接到url上，和原来的方式没有差别。

constructor(public http: HttpClient) {
}

this.http.get(url).subscribe(res => {
      // 成功收到response
    }, error => {
      // 请求发生错误
    }
)

POST请求

发起post请求，需要配合HttpParams才可以实现。使用HttpParams的时候要注意这里有一个坑。

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

像这样子链式调用set方法是没有问题的，可以把所有的参数都带进去。

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

像这样子调用set方法，后面set的参数会覆盖前面的参数，导致最后只有一个参数，其他参数全没了。

好在HttpParams的构造方法里提供了两种方式去构造参数
1.new HttpParams({fromString: "param1=1¶m2=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 => {
    // 请求发生错误
  }
);

传入对象、数组参数

如果仅仅只需要传入一些简单的参数，到上面就已经可以实现了。但是如果要传入一些复杂的参数，比如数组、对象参数，使用new HttpParams({fromObject: paramsObj})是无法完成任务的。

所以只能想办法把复杂的参数按照相应的规则拼接起来，然后使用new HttpParams({fromString: complexParamsString})来实现。

当然，我们使用get发起请求的时候也可以不用先在url上拼接参数，也可以将参数以HttpParams的方式传入。

// 将复杂的参数组装成字符串
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){
    // 网络请求出现错误
  }

  if (res) {
    // 网络请求成功
  } 
})