Vue中axios踩坑之路-POST传参

1 场景

刚开始使用Vue，里面的坑是一个接一个，今天就遇到一个axios POST传参的问题，我需要在请求中传递参数，然后按官方文档的格式开始操作，代码如下：

axios.post('/user', {
   id:'2',
   username:'4'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

我们从后台取数据发现没有取到数据，我们从请求头中发现，参数的格式是Request Payload，这样后台取不到的，具体请看ajax提交及Spring接收

2 解决

使用qs，
第一步:

在项目中

npm install qs 

第二步：
引入qs

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

3 扩展

qs.stringify和JSON.stringify的使用和区别

qs.stringify()将对象 序列化成URL的形式，以&进行拼接。

JSON是正常类型的JSON，

请对比一下输出

var a = {name:'hehe',age:10};
 qs.stringify(a)
// 'name=hehe&age=10'
JSON.stringify(a)
// '{"name":"hehe","age":10}'