「时光不负，创作不停，本文正在参加2021年终总结征文大赛」
2021总结#回首过往，尽是美好！！！
好了，开始这次的Vue学习分享吧！
相信很多小伙伴们，初次接触Vue调用接口的话，应该会遇到下面这个问题吧：
在vue进行传参时，会遇到axios进行post传参出错
在用axios进行post请求传参时，明明接受到了数据，可是仍然报错——用户名为空。
// addForm表单内容利用post请求
this.$refs.addFormRef.validate((val) => {
//console.log(val)
if(val) {
this.$axios({
url: 'users',
method: "post",
params: { username: this.addForm.username, password: this.addForm.password, email: this.addForm.password, mobile: this.addForm.mobile
}
}).then(res => {
console.log(res)
})
}
})
这是什么原因呢？ 这是因为传参时params和data不一样哦！
get请求时使用params，其中携带的参数会加到url中：
post请求时使用data，参数会加到请求体body中：
axios默认是 Content-type是application/json;charset=UTF-8，post传递时需要把Content-Type设置为application/x-www-form-urlencoded才行。
我们只需要在axios中加入下面这句话：
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
同时，引入axios中的qs库（不需要安装）
利用qs把传递的参数进行封装
let form = this.addForm //qs封装
this.$refs.addFormRef.validate((val) => {
if(val) {
this.$axios({
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
url: 'users',
method: "post",
data: Qs.stringify(form) }).then(res => {
console.log(res)
})
}
})
这样再执行就不会出现问题了，完美解决！！！
