react集成mock

前后端分离已经是软件开发的主流,在开发的过程中,会有很多前端兄弟在想后台大佬接口写好没啊,我要调接口了，这里有时候是会影响到我们的开发效率的,当然有的同志会提出可以自己写本地JSON文件,自己伪造假数据,说实话这个方法确实可以解决问题,但是还是有弊端的,第一数据比较多的时候,一般大家都不乐意去写了,第二后台写好之后,还是要去改代码的,这个就更不舒服了!本文就是解决这个痛点的!我们可以使用Mock来造假数据,这样我们就可以直接脱离后台来写代码了,下面就简单描述一下在react中如何使用mock

1. 安装Mock和axios

这一步之间默认已经创建好了react项目

npm install mockjs
npm install axios

2. 封装axios

import axios from 'axios'
class Http {
    static get(api, param) {
        return new Promise((res, rej) => {
            axios.get(api, param).then(result => {
                res(result);
            });
        })
    }
    static post(api, params) {
        return new Promise((res, rej) => {
            axios.post(api, params).then(result => {
                res(result);
            })
        });
    }
    static delete(api, params) {
        return new Promise((res, rej) => {
            axios.delete(api, params).then(result => {
                res(result);
            });
        })
    }
    static put(api, param) {
        return new Promise((res, rej) => {
            axios.put(api, param).then(
                (result) => {
                    res(result);
                }
            )
        })
    }
}
export default Http

3. 写一个Mock的接口

import Mock from 'mockjs'
export const data = Mock.mock("/mock", {
    "userData|400": [{
        "id|+1": 0,
        "name": "@cname",
        "age|10-20": 25,
        "sex|1": ["男", "女"],
        "job|1": ["java", "javascript", "python", "php"]
    }]
});

4. 导入index.js

import "../src/assets/mock/userData

5. 发送一个请求

 Http.get("/mock", { name: "zs" }).then((re) => {
      console.log(re);
    });

6. 完成

这样就可以直接造出跟后台一样格式的数据,并且通过请求获取它,做到真正的前后端分离,关于mock语法的问题,我目前也是用得着的时候去查一下,具体可以去官网详细查询!