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,any>): 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来的简单易用。
网友评论