angular4之httpClient简单封装2018-03-07

angular4官方已经开始推荐使用HttpClient, HttpHeaders, HttpParams而逐渐摒弃Http，这里简单使用httpclient封装，成度到可以请求就行，拦截，验证什么的暂时不管。

首先新建httpService并注入httpclient

先说get方法

MyHttp(url: string): any {

return this.http.get('/api/' + url).pipe( );

}

其中的api为反向代理跨域访问，具体可访问这篇文章angular4跨域。

这是最简单的get访问，只是大部分情况下的get请求都会带参数，例如登陆。

这种情况下会选择 HttpParams,具体使用如下

MyHttp(url: string, param: Map): any {

return this.http.get('/api/' + url, {

params: this.myParams(param)

}).pipe( );

}

其中myParams()函数如下：

myParams(param: Map): HttpParams {

let ret = new HttpParams();

if (param) {

param.forEach(function (value, key) {

if (value) {

ret = ret.set(key, value);

}

});

}

return ret;

}

post方法封装：

MyHttpPost(url:string, params:any) {

let httpOptions = {

headers:new HttpHeaders({'Content-Type':'application/x-www-form-urlencoded; charset=utf-8'})

};

return this.http.post('/api/' + url, params,httpOptions).pipe();

}

这算是最简单的封装了。

最后是调用方法：

get:

this.httpService.MyHttp("url", new Map().set(参数放在这里))

   .subscribe((r) => {

}

post:

this.httpService.MyHttpPost("url",$.param({

参数放在这里

})).subscribe((r) => {

}

注意：这里的$.param()是jquary的一种参数序列化方法，如果不加可以正常使用可以去掉，只是我自己这边没有这个请求总失败。

总结：

angular4的http请求真的难用，尤其是post既然都不得不（或者是我还没找到合适的解决办法）使用到jquary，那干脆直接使用jquary来的简单易用。