vue使用axios调用api接口 ---- 关于qs序列化

常见的Content-Type: application/x-www-form-urlencoded 当设置好Content-Type参数不进行序列化你会发现还是走的json方式请求。

举例：

var params = {
                    pageIndex : that.packnowpage,
                    customName : that.packsearchinfo,
                };
                that.$axios
                .post(`${this.$APIURL}/upgradePackage/list`,params,{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                .then(response => {
                    const { data } = response                
                    if(data.code=="0")
                    {
                        console.log(data);
                        //赋值
                        that.packData = data.data.list;
                        that.packnowpage = data.data.pageNum;
                        that.packcountpage = data.data.pages;                  
                    }
                    else
                    {
                        this.$message.error(data.msg);
                    }
                }).catch(error => {
                    this.$message.error(error);
                })

that.$axios.post(
`${this.$APIURL}/upgradePackage/list`,
params,
{headers:{'Content-Type':'application/x-www-form-urlencoded'}})

正确写法：

that.$axios.post(
`${this.$APIURL}/upgradePackage/list`,
qs.stringify(params),
{headers:{'Content-Type':'application/x-www-form-urlencoded'}})




关于qs

在项目中使用命令行工具输入：npm install qs
安装完成后在需要用到的组件中：import qs from 'qs’
具体使用中我查看了：qs.parse()和qs.stringify()

这两种方法虽然都是序列化，但是还是有区别的。
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象序列化成URL的形式，以&进行拼接

解决我遇到的问题我使用了qs.stringify()

vue使用axios调用api接口 ---- 关于qs序列化

相关推荐