526互联

Axios学习（一）axios中post的body与query传参区别及使用总结

发布时间 2023-03-24 18:24:26作者: 坤嬷嬷

踩坑描述

最近在vue项目开发中遇到了一个axios请求方面的问题，post请求传单个参数的时候，按照post请求方式传参但是接口报错，在swagger上面测试后发现接口是没有问题的。

踩坑分析

其实仔细一点会发现，这个post请求的Parameter Type是query，而一般情况下post请求方式的Parameter Type是 body，在一些极少情况下，post请求的参数体可能会存在body及query共存的情况，所以这其实涉及到post请求的三大部分：header、body、query（简单来说：header：请求头、body：多参数请求体、query：单参数请求体）。后端的接口在不注解的情况下默认是query，所以get请求用query，因为一般传递单个参数，而post请求多用body，因为一般传递多个参数。

解决方案1

// 参数情况：（interfaceState：query参数，ID：body参数）
this.$axios.post(`${
    this.url}updateCompanyState?interfaceState=${
    state}`, // query参数可以直接拼在url后面
{
    ID: '123', // body参数
},
).then(res => {

    console.log(res);
});

解决方案2

// 参数情况：（interfaceState：query参数，ID：body参数）
this.$axios({
    url: `${this.url}updateCompanyState`,
    method: 'post',
    data: {
        ID: '123',
    }, // body参数
    params: {
        interfaceState: state,
    }, // query参数
}).then((res) => {
    console.log(res);
});