Mock请求拦截

我们都知道现在的项目大都是前后端分离的模式——但是这样其实也需要后端和前端配合的：后端提供一个测试接口，前端使用后端的测试接口数据来渲染页面，联调功能点。但是这样就有一个弊端：前端只能在初期布置完静态页面，之后就一直等待后端的测试接口，特别影响项目的进度。

为了避免这个等待的无效时间，实现真正的前后端分离，我们可以使用 Mock 拦截器，模拟后端数据，实现项目的开发。等到项目真正上线了，将其删除即可。

拦截器的语法为：

Mock.mock(拦截的URL/正则, 拦截的请求方式-小写, function(request){
    return 请求的结果
})

1. 拦截GET请求

引入 jquery、mockjs

// 1. 定义返回的数据
var { newList } = Mock.mock({
    'newList|20-30':[
        {
            id:"@increment(1)",
            title:'@ctitle',
            updat:'@date(yyyy-MM-dd hh:mm:ss)',
            info:'@cparagraph(5,10)',
            small:"@dataImage(300x200)"
        }
    ]
})

// 2. 拦截get请求
Mock.mock('api/douban/movie/top250','get', () =>{
    return {
        status: 200,
        message: '获取电影列表成功！',
        total: newList.length,
        list: newList
    }
})

// 3. 当我们使用ajax进行数据请求相同的接口事，会被mock拦截
$.ajax({
    url:'api/douban/movie/top250',
    success(res) {
        console.log(res)
    }
})

1.1 GET带参数

Mock请求拦截器设置的函数默认具有一个参数对象，这个参数对象包含与请求相关的一些信息，常用的三个属性如下：

• type 请求方式

• url 请求地址

• body POST请求携带的参数

我们可以从参数对象的url属性中提取参数，从而使模拟的数据更具真实性

携带参数的 GET请求

$.ajax({
    url: 'api/douban/movie/top250',
    data: {
        start: 2,
        limit: 5
    },
    success(res) {
        console.log(res)
    }
})

在拦截请求的函数中提取参数，让返回值更加真实

Mock.mock(/\api\/douban\/movie\/top250/, 'get', (request) => {
    // 根据 request.url 获取请求地址，然后利用URL参数对象提取参数
    let { start = 1, limit = 10 } = Object.fromEntries(new URL(request.url).searchParams.entries())
    // 获取总页数
    let totalPage = Math.ceil(newList.length / limit)
    return {
        firstPage: start == 1,
        lastPage: start == totalPage,
        pageNumber: +start, // 用加号是将其转化为数字
        pageSize: +limit,
        totalPage,
        totalRow: newLs.length,
        list: newList.slice((start - 1) * limit, start * limit)
    }
})

2. 拦截POST请求

与拦截GET请求类似，不同点在于请求参数的获取，POST拦截可以直接通过参数对象.body获取

Mock.mock('地址/正则规则', 'post', ({ body }) => {
    // 假如传递的参数是 form 形式
    let data = Object.fromEntries(new URLSearchParams(body).entries())
    console.log(data);
    // ...
    return {
        // ...
        code: 'success'
    }
})