Angular 5 HttpClient:将POST参数作为URL编码字符串发送

时间:2017-11-22 22:55:39

标签: javascript angular

Angular 5.0.1

我正在查看Angular HttpClient的文档:https://angular.io/guide/http, 但我似乎无法想象如何将POST参数作为URLEncoded字符串而不是JSON字符串发送。例如,我的Java http客户端将默认发送:

username=test%40test.com&password=Password1&rolename=Admin

但是Angular希望默认发送为Json:

{"username":"test@test.com","password":"Password1","rolename":"Admin"}

这是我目前的代码:

    let body = {
      username: "test@test.com",
      password: "Password1",
      rolename: "Admin"
    };

 let headers = new HttpHeaders();
    headers = headers.set("Content-Type", "application/x-www-form-urlencoded");


    this.http.post(this.baseUrl, body, {
      headers: headers,
    })
      .subscribe(resp => {
      console.log("response %o, ", resp);
    });

我也尝试过添加HttpParams:

let  httpParams = new HttpParams();
httpParams.append("username", "test@test.com");
httpParams.append("password", "Password1");
httpParams.append("rolename", "Admin");

...
headers: headers,
      params: httpParams

但HttpParams似乎没有效果。

知道如何对请求进行URL编码而不是Json吗?

2 个答案:

答案 0 :(得分:7)

append()会返回 HttpParams对象,因此您需要对httpParams代码稍作修改。试试这个:

let httpParams = new HttpParams()
    .append("username", "test@test.com")
    .append("password", "Password1")
    .append("rolename", "Admin");

在上面的代码中,我们将append个调用链接起来,在每次调用时创建一个新的HttpParams对象。我们最后一次调用append时,返回的HttpParams对象将包含所有先前附加的参数。

答案 1 :(得分:1)

这是因为HttpParam是不可变的。

您可以阅读why here

简而言之:

let httpParams = new HttpParams()
    .append("username", "test@test.com")
    .append("password", "Password1")
    .append("rolename", "Admin");
  

因为app可能会重试请求,拦截器链可能会处理   个人请求多次。如果请求是可变的,a   重试的请求将与原始请求不同。   不可变性确保拦截器对每个拦截器看到相同的请求   尝试。