mock接收ajax、axios、vite请求get、post参数

浅浅的花香味﹌ 2024-04-07 11:30 88阅读 0赞

mock除了可以发送参数以外，还可以进行接收  
此处仅仅展示如何接收，具体可以根据情况去进行判断返回值  
接收的参数，如果是`id=1&name=2`格式，推荐使用qs进行解析

#### mock接收ajax、axios请求get、post参数 ####

*  ajax
 *   *  get
     *  post
 *  axios
 *   *  get
     *  post
     *  post + qs
 *  vite
 *   *  get
     *  post
     *  post + qs form-data格式

## ajax ##

### get ###

请求：

$.ajax({
        
        url: "http://asd.asd",
        method: 'get',
        data: {
         id: 111 },
        success: function (response) {
        
            console.log(JSON.parse(response));
        }
    });

mock:

Mock.mock(RegExp('http://asd.asd' + ".*"), 'get', (data) => {
        
        console.log(data);
        return {
        
            'name': '@cname', // 中文名称
        }
    });

结果：

![在这里插入图片描述][d6cdecde017a4c61bc5af019a12ac320.png]  
自行进行切割数据即可

--------------------

### post ###

请求：

$.ajax({
        
        url: "http://asd.asd",
        method: 'post',
        data: {
         id: 111 },
        success: function (response) {
        
            console.log(JSON.parse(response));
        }
    });

mock:

Mock.mock('http://asd.asd', 'post', (data) => {
        
        console.log(data);
        return {
        
            'name': '@cname', // 中文名称
        }
    });

结果：  
![在这里插入图片描述][60f2cb5d09fb4f11849f424670049529.png]  
自行进行切割数据即可

--------------------

## axios ##

### get ###

请求：

axios({
        
          url: 'http://asd.asd',
          method: 'get',
          params: {
        
            id: 111
          }
        }).then((res) => {
        
          console.log(res);
        })

mock:

{
        
            url: RegExp('http://asd.asd' + ".*"),
            method: "get",
            response: (data) => {
        
                console.log(data);
                return {
        
                    status: 200,
                    message: 'success',
                    data: {
        
                        'name': '@cname', // 中文名称
                    }
                }
            }
        }

结果：

![在这里插入图片描述][4154d2ec0988495987531f6cef46f495.png]

自行进行切割数据即可

--------------------

### post ###

请求：

axios({
        
          url: 'http://asd.asd',
          method: 'post',
          data: {
        
            id: 111
          }
        }).then((res) => {
        
          console.log(res);
        })

mock:

{
        
        url: "http://asd.asd",
        method: "post",
        response: (data) => {
        
            console.log(data);
            console.log(JSON.parse(data.body));
            return {
        
                status: 200,
                message: 'success',
                data: {
        
                    'name': '@cname', // 中文名称
                }
            }
        }
    }

结果：  
![在这里插入图片描述][e1b0d5ef0a3b47d7b97d33e8be9b6842.png]

--------------------

### post + qs ###

如果请求经过了qs的处理  
请求：

axios({
        
          url: 'http://asd.asd',
          method: 'post',
          data: qs.stringify({
        
            id: 111
          })
        }).then((res) => {
        
          console.log(res);
        })

mock:

{
        
        url: "http://asd.asd",
        method: "post",
        response: (data) => {
        
            console.log(data);
            console.log(qs.parse(data.body));
            return {
        
                status: 200,
                message: 'success',
                data: {
        
                    'name': '@cname', // 中文名称
                }
            }
        }
    }

结果：  
![在这里插入图片描述][704b42a53a594779ab3f8724bf576e3d.png]

## vite ##

因为vite使用的是vite-plugin-mock插件，所以有一部分不相同  
这个插件的打印是在`终端`中

### get ###

请求：

axios({
        
      url:'/api/getUsers',
      method:'get',
      params:{
        
        id:11
      }
    }).then((res)=>{
        
      console.log(res);
    })

mock:

{
        
            url: "/api/getUsers",
            method: "get",
            response: (data) => {
        
                console.log(data);
                console.log(data.query.id);
                return {
        
                    code: 0,
                    message: "ok",
                    data: {
        
                        'rows|10': [{
        
                            id: '@guid',
                            name: '@cname',
                            'age|20-30': 23,
                            'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
                          }]
                    },
                }
            }
        }

结果：  
![在这里插入图片描述][f4d9d8ec1cb84361865c47703cd04fc4.png]

--------------------

### post ###

请求：

axios({
        
      url:'/api/getUsers',
      method:'post',
      data:{
        
        id:1
      }
    }).then((res)=>{
        
      console.log(res);
    })

mock:

{
        
            url: "/api/getUsers",
            method: "post",
            response: (data) => {
        
                console.log(data);
                return {
        
                    code: 0,
                    message: "ok",
                    data: {
        
                        'rows|10': [{
        
                            id: '@guid',
                            name: '@cname',
                            'age|20-30': 23,
                            'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
                          }]
                    },
                }
            }
        }

结果：  
![在这里插入图片描述][f1b9b0438ec343e3bd58945da0041fd4.png]

--------------------

### post + qs form-data格式 ###

请求：

axios({
        
      url:'/api/getUsers',
      method:'post',
      data:qs.stringify({
        
        id:11
      })
    }).then((res)=>{
        
      console.log(res);
    })

mock:

{
        
            url: "/api/getUsers",
            method: "post",
            rawResponse: async (req, res) => {
        
                let reqbody = ''
                await new Promise((resolve) => {
        
                    req.on('data', (chunk) => {
        
                        reqbody += chunk
                    })
                    req.on('end', () => resolve(undefined))
                })
                console.log(reqbody);// 请求数据
                console.log(qs.parse(reqbody));
                res.statusCode = 200
                res.end(JSON.stringify({
         name: '@cname', })) // 此处向前端返回数据，需要预先处理生成，此处不识别占位符
            },
        }

结果：  
![在这里插入图片描述][6b3df2b82af94a86b9e800545d68ffc2.png]

![在这里插入图片描述][e99eca955bfd4ab787aa803744d2f04a.png]

--------------------

[d6cdecde017a4c61bc5af019a12ac320.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/677746868c18481f8757a2e0cf1e1b8a.png
[60f2cb5d09fb4f11849f424670049529.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/daf4780937ee4939ab679cbbf05b1c17.png
[4154d2ec0988495987531f6cef46f495.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c49511878940421182d2603e87ebb5f4.png
[e1b0d5ef0a3b47d7b97d33e8be9b6842.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/11f6a998338b476bbf53006a7371a06a.png
[704b42a53a594779ab3f8724bf576e3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/073b6cf591cb4931b7dfdf9bf08e9754.png
[f4d9d8ec1cb84361865c47703cd04fc4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/15b59930186e4391ba66a942fb061f15.png
[f1b9b0438ec343e3bd58945da0041fd4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/28e36065fe324e238eeec5dfc0dcc96d.png
[6b3df2b82af94a86b9e800545d68ffc2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b90f5f23583641dcb85dc6f30c0a0c25.png
[e99eca955bfd4ab787aa803744d2f04a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8591ee710ef044199489f08bea14b62f.png