小tips： qs.stringify() 和JSON.stringify()的区别以及在vux中使用post提交表单数据需要qs库序列化

Posted 2020-10-12 风雨后见彩虹

qs库的npm地址：https://www.npmjs.com/package/qs

功能虽然都是序列化。假设我要提交的数据如下

var a = {name:‘hehe‘,age:10};

qs.stringify序列化结果如下
name=hehe&age=10

而JSON.stringify序列化结果如下：
"{"a":"hehe","age":10}"

vux中使用post提交表单数据：

this.$http.post(this.$sign.config.url.loginUrl,this.$qs.stringify({
    "phone":this.phoneNumber,
    "vCode":this.loginCode,
    "smsCode":this.phoneCode    
    })
)
.then(response=>{
    console.log(response.data);
    if(response.data.httpCode == 200){
        
    }else{
        
    }
}) 

在firebug中可以看到传递的参数：
phone=15210275239&vCode=8vsd&smsCode=1534

在vue中使用axios：

this.$axios.post(loginUrl, {
    "email": this.email,
    "password": this.password
}, {
    transformRequest: (data) => {
        return this.$qs.stringify(data)
    },
}).then(res => {
    if(res.data.resultCode == RESULT_CODE_SUCCESS){
        console.log(‘登录成功‘);
        this.$router.push({name:"home"})
    }else{
        console.log(‘登录失败‘);
    }
}).catch(err => {
    console.log(‘登登录出现错误‘);
})