angular http请求的多种传参方式总结

最新推荐文章于 2022-05-31 00:03:02 发布

gaiery

最新推荐文章于 2022-05-31 00:03:02 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 NG4

本文链接：https://blog.csdn.net/gaiery/article/details/103953332

前端同时被 2 个专栏收录

30 篇文章

订阅专栏

NG4

9 篇文章

订阅专栏

本文详细介绍了HTTP请求中的GET、POST、PUT、DELETE等方法的使用，包括如何在Angular中通过HttpClient进行请求，以及如何处理特殊字符的问题。同时，提供了具体的代码示例和参数传递的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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=>{
    })