angular使用Http和HttpClient设置查询参数的区别

由于Angular的版本更新,里面Http将逐渐被HttpClient替代,所以Http中的一些方法在HttpClient中是无法使用的,这里就遇到一个设置查询字符串之间的差别

使用Http方法设置查询字符串

 import { 
  RequestOptions, 
  Headers, 
  Http } from '@angular/http'; 

constructor(http: Http) {};

release() {

let headers=new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); //第一处区别

let options=new RequestOptions({ headers: headers }); //第二处区别

let params=newURLSearchParams();

params.append("orderId",this.orderId);

params.append("message", this.message);

params.append("grade", this.star);

for(leti=0; i<this.imgs.length; i++) {

params.append("url[]", this.imgs[i]);

}

letbody=params.toString();

console.log(body);

this.http.post('http://api.xxxxxx.bpiao.com/ERP-Web/ceshi/order/xxxxxx', body, options).subscribe(data => {

console.log(data);

this.location.back();

})

}

使用HttpClient方法设置查询字符串

import { 
  HttpClient, 
  HttpParams, 
  HttpHeaders } from '@angular/common/http';

constructor(http: HttpClient) {};

release() {

let headers=new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }); // 第一处区别

let options= {headers: headers}; //第二处区别

let params=newURLSearchParams();

params.append("orderId",this.orderId);

params.append("message", this.message);

params.append("grade", this.star);

for(leti=0; i<this.imgs.length; i++) {

params.append("url[]", this.imgs[i]);

}

let body=params.toString();

console.log(body);

this.http.post('http://api.xxxxxx.bpiao.com/ERP-Web/ceshi/order/xxxxx', body, options).subscribe(data => {

console.log(data);

this.location.back();

})

}

这里导入包和实例HttpClient的区别我们在此不做讨论,照着文档里的操作就可以完成,主要看release()方法区别的解决方法我们需要看看post方法的源码

post(url: string, body: any | null, options?: {

headers?: HttpHeaders; //这里方法便是解决所有区别的关键

observe?: 'body';

params?: HttpParams;

reportProgress?: boolean;

responseType?: 'json'; withCredentials?: boolean; }): Observable<Object>;

如果大家有更好的解决方法欢迎留言