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
        })
    )
}))