react中使用Mock.js

为啥使用Mock.js

作为一名前端开发人员，当需要请求数据，没有接口，自己又不想写的时候，使用Mock.js自动生成就OK了。

话不多说，上操作

1. cnpm i -D mock.js
   没错，第一步当然是得先安装，安包工具随便

2. 在资源目录下新建mock文件（我是为了方便找，所以建在了src下，打包记得删除，使用码云托管代码的话，用.gitignore忽略掉）

   

3.mock>api.js(叫啥无所谓，自己认识就行)

4.导入安装的mock.js(下面分别是ES6\ES5的写法)

5.写mock数据
不知道咋写？mock.js官网

import Mock from 'mockjs'//ES6写法
// let Mock = require("mockjs") ES5写法
//模拟延迟
Mock.setup({
    timeout:500
})
//生成随机数据
Mock.mock("http://localhost:3000/#/table/basic/dataSource2",function(){
    return Mock.mock({
        "code":0,
        "msg":"",
        "result":{
            "list|15":[{
                "id|+1":1,
                "userName":"@cname",
                "sex|0-1":"1",
                "status|1":[1,2,3,4,5],
                "interest|1":[1,2,3,4,5],
                "birthday":"2020-5-20",
                "address":"@province",
                "time":"09:00"
            }],
            "page":1,
            "page_size":1,
            "total":100
        }
    })
})

6.ajax请求
我这里用的axios

axios.get("http://localhost:3000/#/table/basic/dataSource2")//接口地址与拦截地址要一致
	 .then((res)=>{
	 	console.log('res', res);//可以通过res.data.result获取数据
     })

7.请求结果
数据得到了。。。不用自己手写数据了

开心的处理数据就好了