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

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

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', // 中文名称
    }
});

结果:

在这里插入图片描述
自行进行切割数据即可


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', // 中文名称
    }
});

结果:
在这里插入图片描述
自行进行切割数据即可


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', // 中文名称
                }
            }
        }
    }

结果:

在这里插入图片描述

自行进行切割数据即可


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', // 中文名称
            }
        }
    }
}

结果:
在这里插入图片描述


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', // 中文名称
            }
        }
    }
}

结果:
在这里插入图片描述

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工程师', '需求工程师']
                      }]
                },
            }
        }
    }

结果:
在这里插入图片描述


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工程师', '需求工程师']
                      }]
                },
            }
        }
    }

结果:
在这里插入图片描述


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', })) // 此处向前端返回数据,需要预先处理生成,此处不识别占位符
        },
    }

结果:
在这里插入图片描述

在这里插入图片描述


Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐