Mockjs最全使用方法

        吐血整理，新项目整体使用了Mock接口作为测试，中途遇见了很多不知道怎么解决的地方，整理一下，希望也能帮助到你。

        一般在项目中会封装一个axios接口文件一个mock文件，这里面就不封装了，为了更直观的展示。

一、前端调用格式

import Axios from 'axios'

Axios.get('http://127.0.0.1/api/list')
	.then((res: any) => { // do sth })
	.catch((err: any) => { // do sth })

二、最简单的mock接口

• 无论get、post、delete、patch请求方式，都可以返回数据。
• 普通的接口请求列表和增删改查的接口URL不同，比如获取用户列表的接口是 ‘/usersList’，新增用户是’/addUser’，删除用户是’/deleteUser’，所以模拟这个情况的接口，定义多个最简单的Mock接口就可以解决。

Mock.mock(`http://127.0.0.1/api/usersList`, {
    code: 1,
    msg: 'success',
    data: {
        total: '@natural(1,1000)', // 随机生成一个1-1000之间的数值
        'list|1-10': [{ // list 是一个随机生成一个1-10个对象的数组
            'id|+1': 1, // 自增+1，初始值1
            name: '@cname', // 随机生成一个name  
            age:'@natural(1,100)' // 随机生成一个1-100之间的数值
        }]
    }
})

三、规定 method

• 当接口是Resrful风格，获取用户列表接口是[GET] /users，新增用户是[POST] /users，接口URL一样，所以此时要规定 method。
• Mock.mock(url,method)传入的第2个参数为当前接口规定的 method。

Mock.mock(`http://127.0.0.1/api/users`,'get' ,{
    code: 1,
    msg: 'success',
    data: {
        total: Random.natural(1, 1000),
        'list|1-10': [{
            'id|+1': 1,
            name: '@cname',
            age:'@natural(1,100)'
        }]
    }
})

四、接收post请求的参数

• Mock.mock(url, method, function)的第三个参数是回调函数，可以获取post请求时放在body中的参数。

前端请求方式：我还是放一下把，简单版，为了看一下传递的参数。

Axios.post('http://127.0.0.1/api/users', { name: '小红', age: 15 })
	.then().catch()

Mock数据

Mock.mock(`http://127.0.0.1/api/users`, 'post', ((options: any) => {
    console.log(options)
    return (
        Mock.mock({
            code: 1,
            message:'用户添加成功'
        })
    )
}))

五、接收get请求的参数

1、接口格式类似 [GET] /users/{id}

• Restful风格的接口中，比如有根据id获取user详细信息，通常接口是 [GET] /users/{id}，想获取ID为1的user的信息，请求的url为 ‘/users/1’。
• 使用 RegExp()，如果你正则用的很好，里面随你发挥，我这个就写的比较随性了,使用的.*～

Axios.get(`http://127.0.0.1/api/users/1`).then().catch()

Mock.mock(RegExp(`http://127.0.0.1/api/users/.*`), 'get', ((options: any) => {
    console.log(options)
    const arr = options.url.split('/') 
    return (
        Mock.mock({
            code: 1,
            msg: 'success',
            data: {
                id: Number(arr[arr.length - 1]),
                name: '小红',
                age: 15,
            }
        })
    )
}))

2、接口格式类似 /users?key=value&key=value

比如获取列表的接口需要带分页和每页的条数，一般这样的接口是get请求，将参数拼接在URL上传给后端。

// 前端请求
Axios.get(`http://127.0.0.1/api/users?page=2&size=20`) // 获取第2页的数据，每页20条
            .then().catch()
            
// Mock
export function conversionUrlToQuery(url: string): any {
    let obj: any = {}
    url.split('?')[1].split('&').forEach((v: string) => {
        const s = v.split('=')
        obj[s[0]] = s[1]
    })
    return obj
}
Mock.mock(RegExp(`http://127.0.0.1/api/users/?.*`), 'get', ((options: any) => {
    const query = conversionUrlToQuery(options.url) // {page:'2',size:'20'}
    console.log(query.size)
    let data :any[] = []
    for (let i = 0; i < query.size; i++) { 
        data.push({ name:'@name',age:'@natural(1,100)' })
    }
    return (
        Mock.mock({
            code: 1,
            msg: 'success',
            data: data
        })
    )
}))