angular http请求的多种传参方式总结
1.GET
service:
getData(data): Observable<any> {
const url = `${
this.config.url}/xxx`;
return this.http.get(url, {
params: data }).pipe(
map(res => res)
);
}
// url拼接方式
getData2(data): Observable<any> {
const url = `${
this.config.url}/xxx?name=` + data.name +
'&age=' + data.age +
'&gender=' + data.gender +
'&page=' + data.page +
'&pageSize=' + data.pageSize;
return this.http.get(url).pipe(
map(res => res)
);
}
调用：
const info = {
name:xxx,
age:xxx,
gender:xxx,
page:1,
pageSize:10
}
this.service.getData(info).subscribe(val=>{
})
2.POST
service
addData(data): Observable<any> {
const url = `${
this.config.url}/addXXX`;
return this.http.post(url,data).pipe(
map((res: any) => {
return res;
})
);
}
调用：
const info = {
name:xxx,
age:xxx
}
this.service.addData(info).subscribe(val=>{
})
登录
login(data): Observable<any> {
const url = `${
this.config.login}`;
return this.http.post(url, data).pipe(
map((res: any) => {
return res;
})
);
}
调用：formData形式传参
const info = {
username: this.form.value.userName,
password: this.form.value.password
}
const params = new HttpParams({
fromObject: info
});
this.service.login(params).subscribe(val=>{
})
service：
testPost(data):Observabal<any>{
const url = `${
this.config.server}/pushed/dispose`;
return this.http.post(url,{
},{
params:data}).pipe(
map((res:any)=>{
return res;
})
)
}
调用：
const data = {
id:1
}
this.service.testPost(data).subscribe(val=>{
})
service：
APPLICATION/JSON
childPolicySubmit(data): Observable<any> {
const headers = new Headers({
'Content-Type': 'application/json; charset=utf-8'
});
return this.http.post(`${
this.config.urlApi}/births/certificates`, data)
.map((res:any) => res);
}
调用：
const data:any ={
};
data.name="xxx";
data.age = 23;
this.service.childPolicySubmit(data).subscribe(val=>{
})
3.PUT
service
updateData(data): Observable<any> {
const url = `${
this.config.url}/updatexxx`;
return this.http.put(url,data).pipe(
map((res: any) => {
return res;
})
);
}
调用
const info = {
id:1,
name:xxx
}
this.service.updateData(info).subscribe(val=>{
})
4.DELETE
// 批量删除
delMore(data): Observable<any> {
const url = `${
this.config.url}/XXX/remove`;
return this.http.delete(url, {
params: data}).pipe(
map((res: any) => {
return res;
})
);
}
// 单条删除
delSingle(data): Observable<any> {
const url = `${
this.config.url}/remove/`+ data.id;
return this.http.delete(url).pipe(
map(res => res)
);
}
调用
//批量删除
const info = {
ids: this.selectIds.join(',')
}
const params = new HttpParams ({
fromObject: info
})
this.service.delMoreOrg(params).subscribe(val=>{
})
//单条删除
const info = {
id: this.selectIds.join(',')
}
this.service.delExp(info).subscribe(val=>{
})
5.解决特殊字符问题（+加号被传成空格）
service
onlySubmit(data):Observable<any>{
const info = this.commonFService.forEachData(data);
const url = `${
this.config.server}/report/post`;
return this.http.post(url,info,
{
headers: new HttpHeaders({
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
})
}
).pipe(
map((res:any)=>{
return res;
})
)
}
commonFService
forEachData(data){
let str='';
for(let i in data){
if(i==='urls'){
for(let j=0;j<data['urls'].length;j++){
str = str +"urls="+data['urls'][j]+'&';//urls是一个数组
}
}else{
str = str + i+"="+data[i]+'&';
}
}
str = str.substring(0,str.length-1);//去除最后一个&符号
return str;
}
component.ts
let data = {
fileNames: this.attachNames ? this.attachNames.join("|").replace(/\+/g,'%2B') : "",//注意将加号转换为%2b
attachments: this.attachUrls ? this.attachUrls.join("|").replace(/\+/g,'%2B') : "",
sourceSystem: "NBXC",
comment:"",
infoType: "2",
urls:this.urlsList
};
this.service.onlySubmit(data).subscribe(val=>{
})