axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式—

这篇具有很好参考价值的文章主要介绍了axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

axios实现POST/PUT接口入参是 query的形式而非JSON的形式

先看下什么是query的形式入参：

1.常规的GET请求

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用

一般是GET请求才会是query string parameters的形式入参

参数是`query string parameters`的展示，最终效果是拼接到`url`地址中，如下图所示：

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用

2.常规的POST/PUT请求

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用

一般是POST/PUT请求才会是request payload的形式入参

参数是`request payload`的展示，请求头`request headers`中的`content-type`是`application/json`

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用

3.formData的POST/PUT请求——content-type是multipart/form-data——常用于文件的上传(通过new formData格式上传)

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用

参数是`form data`的展示，请求头`request headers`中的`content-type`是`multipart/form-data`

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用

此时的处理方法就是：

3.1 入参部分的处理：——需要使用formData添加参数

let formData = new FormData();
formData.append('file', 内容1);
formData.append('id', 内容2);
formData.append('filePath', 内容3);

3.2 接口部分的处理：——接口需要设置请求头`'Content-Type': 'multipart/form-data'`

uploadImg(data) {
 return axios.request({
   url: '接口地址',
   headers: {
     'Content-Type': 'multipart/form-data'
   },
   method: 'post',
   data
 });
},

将formData作为接口的入参传入即可实现上面的效果。

4.formData的POST/PUT请求——content-type是application/x-www-form-urlencoded（通过qs实现）

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用

参数是`form data`的展示，请求头`request headers`中的`content-type`是`application/x-www-form-urlencoded`

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用

上面的这两种方式都可以实现此功能，第一张图片的实现方式看4步骤，第二张图片的实现方式看5步骤。

接口部分的处理：

4.1 入参需要通过qs.stringify()进行处理

4.2 请求头需要写为`'Content-Type': 'application/x-www-form-urlencoded',`

UploadContractAgain(params) {
  return request(
    url:'接口地址',
    METHOD.PUT,
    qs.stringify(params),
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    }
  );
},

如果要使用qs则需要先安装querystring插件：

4.3 安装`querystring`插件——`npm install querystring`

4.4 `querystring`模块引入——`import querystring from 'querystring'`

全部引入的话，则写在main.js中，局部引入的话，则写在单个文件中
比如上面的写法，则直接在当前接口文件中引入即可。

4.5 使用`qs.stringify(xxx)`的方式处理对象参数为`query`参数

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用
打印一下对象，及通过qs.stringify(xx)转义后的参数对比：

对象参数：
axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用
通过qs.stringify(x)转义后的参数如下：

5.querystring的POST/PUT请求——content-type是application/x-www-form-urlencoded（通过qs实现）

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用

参数是`form data`的展示，请求头`request headers`中的`content-type`是`application/x-www-form-urlencoded`

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用

5.1 接口部分的处理方法：

export function postChangeOwner(params) {
    return requestSupplier(
        `api/Supplier/ChangeOwner?${qs.stringify(params)}`,
        METHOD.POST,
        null, 
        {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        }
    );
}

注意：querystring的入参一定是要拼接到url地址中的……

formData形式的入参(除文件上传之外的)和querystring的入参,contentType的属性值是一样的，都是application/x-www-form-urlencoded，区别就在于参数是否拼接到url地址中，如果手动拼接到url地址中，则入参会变成querystring中，如果不拼接，则入参会变成formData中。

总结：如果遇到 put/post 请求的query传参，则优先选择通过qs.stringify(params)转化后拼接到url地址中的方式，上面步骤 4与步骤 5中的都适用，但是如果将qs.stringify(params)转化后的参数作为入参，通过formData的形式传入，则部分接口会报错。

总结：如果遇到 put/post 请求的formData传参，则优先选择通过 new FormData的形式处理，此时headers也可以省略，该步骤等同于适用qs.stringify(obg)转义后的数据+headers配置称multipart/form-data

完成！！！
感谢大家的支持！！！文章来源地址https://www.toymoban.com/news/detail-430260.html

到了这里，关于axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

axios 实现 POST/PUT接口入参是 query的形式而非JSON的形式——querystring的使用