react中模拟假数据的方法总结

初次学习react时教程使用的是charles抓包分配假数据的方式来模拟后端数据，但我希望有更加方便/全能的模拟假数据方式，几经周折后有了这篇文章。

总结

• 方法1 使用charles：不推荐使用
• 方法2 使用mock.js：适合于模拟数据较多的情况
• 方法3 ：适合于模拟数据较少的情况使用

---

使用charles

• 不推荐，因为抓包很麻烦，使用Charles抓取localhost包需要注意更换url
• 步骤：
  1. 使用Charles抓包，让Charles代理Chrome，然后将相应的接口通过Map Local Settings设置到本地文件上。
  2. 在本地文件上存储模拟数据。
  3. 但是Charles代理Chrome后如果想抓localhost的包，那还需要从charlesproxy上转一下，十分麻烦。
• 具体案例可参考“React高级内容（3）”中的”使用Charles实现本地接口数据mock”

---

使用mock.js

• 可参考“Mock.js的使用方法”、“react中使用mock.js模拟接口数据”
• 步骤：
  1. 在 src目录下新建 mock文件夹 用于存放我们 mock数据 的js文件。
  2. 在mock数据的js文件中引入mock并输出模拟数据的组件
  3. 在发出AJAX请求的js文件中，引入的mock组件，接下来只要正常书写AJAX请求即可，一旦对应的请求发出，Mock就会拦截并返回数据。

---

直接放在项目public文件夹下

• 在项目的按照 请求地址 在public文件夹下 新建json文件=>将假数据写在json文件中。
  • 当js页面中向某个接口发出AJAX请求获取数据时，项目会先去node中找，找不到就会去public文件夹中找相应的路径下是否有数据。
  • 比如：接口是/api/headerList.json,那可以在public文件夹下=>新建api文件夹=>新建headerList.json，放置相应假数据
• 注意：public下的文件夹内不能放js文件，因为他是直接读取数据的，不会进行任何操作！