(小程序篇)21.mock模拟数据

说明：模拟后台返回数据，完成界面功能开发
PS:官方地址

1.基础用法

Mock 的入口在工具调试面板顶部的 Tab，点 + 新建规则
规则示例

2.请求接口说明

说明：http请求封装看《(小程序篇)13.封装http请求》
PS: 原先http.js中封装的，我这里做了修改，请求结果返回res

3.定义调用接口模型

在根目录下的model文件下新建 myMock.js

/**
 * 模拟数据接口
 */
import { Http } from '../utils/http';
class myMock{
  static async getCate(){
    return await Http.request({
      url: 'index/category'
    })
  }
}
export {
  myMock
}

4.调用接口

PS:这里使用了定时器，需要先渲染完mock，不然请求会没有找到路径，报404

page({
	...
    async onLoad(options) {
      setTimeout(async ()=>{
        const cateData = await myMock.getCate();
        console.log(cateData);
      },2000)
    },
    ...
})

5.效果展示