如何用mockjs拦截接口请求，脱离后端愉快的写bug

1、 安装

1.1 浏览器安装

1.1.1 去github下载mockjs,点我去下载

<script type="text/javascript" src="./path/to/your/mockjs/dist/mock.js"></script>

1.1.2 直接使用cdn引用

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>

2.2 Node (CommonJS)安装

# 安装
npm install mockjs

2、使用

2.1 拦截接口请求，并返回自己要想要的数据

2.1.1 拦截精确路径的get请求，并模拟

// mockjs拦截代码

const mock = Mock = require('mockjs')
Mock.mock('/api/sign/out', 'get', (options) => {
    console.log(options);
    return {
        data: true,
        code: 0,
        message:'success'
    }
})

// 请求代码如下

axios.get('/api/sign/out')
    .then(function (response) {
        console.log(response);
    })

2.1.2 用正则匹配某些路径来拦截

//模拟一个get请求
Mock.mock(/\/api\/getUsers/, 'get', (options) => {
    console.log(options);
    return [1, 2, 3]
})

// 请求代码
/* 
 以下两个请求都会被拦截 并返回数据 [1, 2, 3]
 因为 Mock.mock 函数的第一个参数是个正则表达式（/\/api\/getUsers/）
 /api/getUsers 和  /api/getUsers/toast 这两个路径都匹配
*/
axios.get('/api/getUsers?ID=12345')
    .then(function (response) {
        console.log(response);
    })
// 为给定 ID 的 user 创建请求
axios.get('/api/getUsers/toast')
    .then(function (response) {
        console.log(response);
    })

2.1.3 拦截一个post请求，并返回自己要想要的数据

Mock.mock(/\/api\/login/, 'post', () => {
    return {
        token: window.btoa("token")
    }
})

// 请求代码
axios.post('/api/login', {
        username: 'xyz',
        pwd: '123456'
    })
    .then(function (response) {
        console.log(response);
    })

2.1.4 其他使用场景

• 1 根据请求传递参数的不同，返回不同的数据

模拟分页接口，我们调试分页的时候很好用哈

// get请求
function parseQueryString(array) {
    if (!Array.isArray(array)) return {}
    if (array.length <= 1) return {}
    let queryString = array[1]
    let queryArray = queryString.split('&')
    return queryArray.reduce((queryObj, queryItem) => {
        let key = queryItem.split('=')[0]
        let val = queryItem.split('=')[1]
        queryObj[key] = val
        return queryObj
    }, {})
}

Mock.mock(/\/api\/getPagedNews/, 'get', (options) => {
    // 通过url 解析出我们想要的分页参数
    //  options.url =  /api/getPagedNews?page=2&pageSize=5
    let query = parseQueryString(options.url.split('?'))
    let returnResponse = {
        code: 0,
        data:[]
    }
    // 根据用户传递的分页参数 返回不同数量 不同的分页数据
    for (let index = 1; index <= query.pageSize; index++) {
        returnResponse.data.push({
            title:`新闻${(query.page-1) * 10 + index}`
        })        
    }
    return returnResponse
})

// 获取第一页数据 每页10条
axios.get('/api/getPagedNews?page=1&pageSize=10')
    .then(function (response) {
        console.log(response.data);
    })

//获取第二页数据 每页5条
axios.get('/api/getPagedNews?page=2&pageSize=5')
    .then(function (response) {
        console.log(response.data);
    })

模拟用户登录（若用户传递的用户名是 admin 密码是 123456 则提示用户登录成功，否则登录失败）

Mock.mock(/\/api\/login/, 'post', (option) => {
    console.log(option);
    // 获取post请求传过来的参数
    let params = JSON.parse(option.body)

    let response = {
        code: 0,
        data: []
    }

    if (params.username === 'admin' && params.pwd === '123456') {
        response.data = {
            token: window.btoa("token")
        }
    } else {
        response = {
            code: 401,
            data: null
        }
    }

    return response
})

// 请求代码
axios.post('/api/login', {
        username: 'xyz',
        pwd: '123456'
    })
    .then(function (response) {
        console.log(response.data);
    })
axios.post('/api/login', {
        username: 'admin',
        pwd: '123456'
    })
    .then(function (response) {
        console.log(response.data);
    })