Axios Http 客户端-如何使用窗体参数构造 Http Post URL

我试图用一些要设置的表单参数创建一个 postHTTP 请求。我正在对节点服务器使用 Axios。我已经有了一个 Java 代码实现，可以构造如下所示的 URL:

JAVA 代码:

HttpPost post = new HttpPost(UriBuilder.fromUri (getProperty("authServerUrl"))
.path(TOKEN_ACCESS_PATH).build(getProperty("realm")));


List<NameValuePair> formParams = new ArrayList<NameValuePair>();


formParams.add(new NameValuePair("username",getProperty ("username")));
formParams.add(new NameValuePair("password",getProperty ("password")));
formParams.add(new NameValuePair("client_id, "user-client"));

我正试图在轴上做同样的事情。

AXIOS 实现:

axios.post(authServerUrl +token_access_path,
{
username: 'abcd', //gave the values directly for testing
password: '1235!',
client_id: 'user-client'
}).then(function(response) {
console.log(response); //no output rendered
}

在发帖请求上设置这些表单参数的方法是否正确？

129465 次浏览
小开
最佳答案

You have to do the following:

var querystring = require('querystring');
//...
axios.post(authServerUrl + token_access_path,
querystring.stringify({
username: 'abcd', //gave the values directly for testing
password: '1235!',
client_id: 'user-client'
}), {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}).then(function(response) {
console.log(response);
});
小开

Why pull in another library or module to do something so simple with pure vanilla JavaScript? It's really one line of JS to produce the desired data to submit in your POST request.

// es6 example


const params = {
format: 'json',
option: 'value'
};


const data = Object.keys(params)
.map((key) => `${key}=${encodeURIComponent(params[key])}`)
.join('&');


console.log(data);
// => format=json&option=value


const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data,
url: 'https://whatever.com/api',
};


const response = await axios(options);  // wrap in async function
console.log(response);
小开

I agree with jhickok, no need to pull in an additional library however their code will not produce a correct result due to the usage of Object.entries, you would expect to see the following:

"format,json=0&option,value=1"

Instead Object.keys should be used.

const obj = {
format: 'json',
option: 'value'
};


const data = Object.keys(obj)
.map((key, index) => `${key}=${encodeURIComponent(obj[key])}`)
.join('&');
  

console.log(data); // format=json&option=value

Then of course...

const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data,
url: 'https://whatever.com/api',
};


const response = await axios(options);

小开

If your target runtime supports it, Axios is able to accept a URLSearchParams instance which will also set the appropriate Content-type header to application/x-www-form-urlencoded

axios.post(authServerUrl + token_access_path, new URLSearchParams({
username: 'abcd', //gave the values directly for testing
password: '1235!',
client_id: 'user-client'
}))

network console screenshot

The same goes for the fetch API

fetch(url, {
method: "POST",
body: new URLSearchParams({
your: "object",
props: "go here"
})
})

提交答案