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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/47445116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:51:25  来源:igfitidea点击:

Angular 5 HttpClient: Send POST params as URL encoded string

javascriptangular

提问by jwBurnside

Angular 5.0.1

角 5.0.1

I'm looking at the docs for Angular HttpClient: https://angular.io/guide/http, but I can't seem to figure how to send POST params as a URLEncoded string instead of a JSON string. For instance, my Java http clients will send like this as default:

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

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

But Angular wants to send as Json by default:

但是 Angular 默认希望以 Json 的形式发送:

{"username":"[email protected]","password":"Password1","rolename":"Admin"}

Here's my code currently:

这是我目前的代码:

    let body = {
      username: "[email protected]",
      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);
    });

I've also tried adding HttpParams:

我也试过添加 HttpParams:

let  httpParams = new HttpParams();
httpParams.append("username", "[email protected]");
httpParams.append("password", "Password1");
httpParams.append("rolename", "Admin");

...
headers: headers,
      params: httpParams

But HttpParams seem to have no effect.

但是 HttpParams 好像没有效果。

Any idea how to URL encode the request instead of Json?

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

回答by Christian Santos

append()returns a newHttpParamsobject, so you'll need to make a slight modification to your httpParamscode. Try this:

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

let httpParams = new HttpParams()
    .append("username", "[email protected]")
    .append("password", "Password1")
    .append("rolename", "Admin");

In the code above, we chain our appendcalls, creating a new HttpParamsobject on each call. The last time we call append, the HttpParamsobject returned will contain all of the previously appended parameters.

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

回答by Ced

That is because HttpParamis immutable.

那是因为HttpParam是不可变的。

You can read why here

你可以在这里阅读原因

In short:

简而言之:

let httpParams = new HttpParams()
    .append("username", "[email protected]")
    .append("password", "Password1")
    .append("rolename", "Admin");

Because the app may retry requests, the interceptor chain may process an individual request multiple times. If requests were mutable, a retried request would be different than the original request. Immutability ensures the interceptors see the same request for each try.

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