react使用mock

第一步，安装

npm install mockjs
yarn add mockjs

第二步，引入使用

//创建一个mock文件夹 在文件夹下编写index.js  内容如下
const Mock = require('mockjs');
//1. “/api/vip/get2”  是需要拦截的请求路径 2. ‘post’ 方法， 3. {}是返回的自定义数据
//  [mock文档](http://mockjs.com/examples.html#Array)
Mock.mock("/api/vip/get2", 'post', {
  data: {
    code: '200',
    'list|8': [{
      id: '@guid',
      name: '@cname',
      eage: '@integer(18, 100)',
      time: '@date'
    }]
  }
})

第三部，发送请求

在发送请求页面（axios）引入 mock文件中的index.js
匹配对应的请求路径和方法，即可拦截，返回mock定义的数据

import '../../../mock/index'
export const get2List = p => axios.post("/api/vip/get2", p)

结果

{
    "code": "200",
    "list": [
        {
            "id": "c7Eda2aD-dEC2-DfEE-cD56-85Ff444fCDED",
            "name": "段勇",
            "eage": 56,
            "time": "2001-08-06"
        },
        {
            "id": "Ddb599Cc-d7BD-A10c-82Ce-ad79CF683CfF",
            "name": "孔超",
            "eage": 55,
            "time": "2010-01-16"
        },
        {
            "id": "Cd899077-28cF-0BF8-9311-324ecdb3BDee",
            "name": "徐勇",
            "eage": 84,
            "time": "1970-05-31"
        },
        {
            "id": "fCE53783-B539-dd2A-BD84-E1aCBE7DAc10",
            "name": "黎娟",
            "eage": 71,
            "time": "2002-10-03"
        },
        {
            "id": "fE57b96C-59CE-FEee-99E0-f26BAa6352fc",
            "name": "江敏",
            "eage": 66,
            "time": "1997-05-05"
        },
        {
            "id": "EE43E8bb-E81F-Ec3A-C764-A864AED8EbDE",
            "name": "于娜",
            "eage": 78,
            "time": "1990-05-01"
        },
        {
            "id": "8d2bD7E2-EDdf-08d2-bB1E-CfC878160b96",
            "name": "谢超",
            "eage": 73,
            "time": "1977-04-17"
        },
        {
            "id": "FC21DFC3-5BbB-4f32-9EFF-8e9FBB382Ae6",
            "name": "汤刚",
            "eage": 70,
            "time": "2017-11-30"
        }
    ]
}