react 中使用mock数据

6,987 阅读2分钟

1.问题:

      在前后端分离的开发中,前端开发需要依赖后端接口,等后端接口开发完后才能开始数据对接,这理论上像是瀑布流式开发,效率低下; 要想提高开发效率,前端开发就不该完全依赖后端数据,所以使用mock数据去解决Api请求数据的问题;

2.使用mock数据希望达到效果:

1)、首先在开发中请求服务数据的方法肯定是封装的,使用过程中如:TestApi.testapi({apiName:'api/test',data:data}) 

2)、在将mock数据切换回服务器实际请求时,希望请求方法,请求api名称,请求参数无需变更,直接将mock数据切换成服务数据就可工作

3)、如此就达到了,前端可自行开发,在后端开发完成后,将mock数据切换成服务端接口请求数据

3.具体实现方法:

1)、安装mockjs :yarn add mockjs / npm install mockjs

2)、在项目根目录下新建mock文件夹,新建TestMock.js文件,文件内容:

//mock数据的构造可查看:http://mockjs.com/examples.html#

3)、假设在根目录pages文件夹index.js 页面,点击某个按钮请求服务器接口:"test/list"

1))这里先示范未进行api请求封装:

使用axios进行请求:

在index.js 页面引入TestMock.js import '../mock/TestMock.js' (这里是为了让api请求直接请求到mock数据中)

以上:点击按钮后即可返回数据:{objectResult:[{ agCode: "testCode", agName: "testName" }], nStr: "398dc6e3e31b1bf71f9847948fb9006c",}

2))若网络请求经过二次封装的,在页面中的请求可能是:TestApi.testapi({apiName:'test/list',data:data})

       这时实际发起网络请求可能在(如:http.js中)实际请求地址是:服务器地址(SERVER_API)+接口名称(API_NAME)(如:http://112.343.55.99:9999/test/list);

      此时在http.js文件中引入:TestMock.js 会发现未请求到mock数据,这里需要明白:mock数据实际的请求地址是:http://localhost:3000/#/test/list 或者:访问的地址+test/list;

       而上面的服务地址是:SERVER_API = http://112.343.55.99:9999所以无法访问到mock数据中,这里的解决方法可以将SERVER_API ="" 设为空字符串,这样请求到的数据就是本地mock数据了,后续若调试完成,可直接将SERVER_API 地址切换回实际的服务器地址,就是直接请求服务器数据了,其他无需修改.

4.遗留问题:

      使用mock数据后固然可以在服务端给出接口文档后就完成前后端数据的交互,但是构造mock数据无疑也是很麻烦的事; 是否可根据服务端给出的文档直接生成呢?或者其他更好的偷懒方法?