Axios Http 客户端 - 如何使用表单参数构造 Http Post url

IT技术 javascript node.js axios
2021-01-14 06:33:47

我正在尝试使用要设置的一些表单参数创建一个 postHTTP 请求。我正在将 axios 与节点服务器一起使用。我已经有一个构建 url 的 java 代码实现，如下所示：

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 实现： 

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
        }

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

4个回答

您必须执行以下操作：

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);
    });
不推荐使用查询字符串？
2021-03-23 06:33:47
这对我帮助很大，querystring.stringify如果您使用application/x-www-form-urlencoded.
2021-03-30 06:33:47
用于 es6 用于import qs from 'qs';字符串化您的对象
2021-04-02 06:33:47

为什么要引入另一个库或module来用纯原生 JavaScript 做一些如此简单的事情？它实际上是一行 JS 来生成要在您的 POST 请求中提交的所需数据。

// 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);
感谢您添加 Giovane。我更新了代码。
2021-03-14 06:33:47
您的解决方案中缺少一个步骤，对值进行编码。替换${val}为 ${encodeURIComponent(val)}
2021-03-17 06:33:47
@Michael Cole 为什么在编辑中删除了方括号解构？它们是必要的。Nick Hanshaw的答案可能是因为您的更改而发布的。
2021-03-30 06:33:47
实际上，此编辑不正确且不起作用。根据尼克的工作答案进行编辑（可能这个在错误编辑之前正在工作）
2021-04-06 06:33:47

如果您的目标运行时支持它，Axios 能够接受一个URLSearchParams实例，该实例还将适当的Content-type标头设置为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'
}))

网络控制台截图

这同样适用于该fetchAPI

fetch(url, {
  method: "POST",
  body: new URLSearchParams({
    your: "object",
    props: "go here"
  })
})
@yonadavbarilan不，不是。什么让你有那个想法？你能提供一个参考吗？
2021-03-22 06:33:47
URLSearchParams 已弃用
2021-04-03 06:33:47
这应该是公认的答案。它不需要另一个库，也不依赖于您自己的库函数实现。简单而且有效
2021-04-06 06:33:47

我同意 jhickok，不需要引入额外的库，但是由于使用了 Object.entries，他们的代码不会产生正确的结果，你会期望看到以下内容：

“格式，json=0&选项，值=1”

相反，应该使用 Object.keys。

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

那么当然...

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

const response = await axios(options);

其它你可能感兴趣的问题
上一篇如何使用 x-www-form-urlencoded 强制 Angular2 POST 下一篇在android webview中使用javascript