1.常规的`GET`请求

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

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

在这里插入图片描述

2.常规的`POST/PUT`请求

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

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

在这里插入图片描述

3.`formData`的`POST/PUT`请求——`content-type`是`multipart/form-data`——常用于文件的上传

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

在这里插入图片描述

此时的处理方法就是：

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实现）

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

在这里插入图片描述
接口部分的处理：

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`参数

在这里插入图片描述
打印一下对象，及通过qs.stringify(xx)转义后的参数对比：

对象参数：
在这里插入图片描述
通过qs.stringify(x)转义后的参数如下：

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

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

在这里插入图片描述

5.1 接口部分的处理方法：

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