希望老师能讲解一下mock数据实现原理

Question

希望老师能讲解一下mock数据实现原理

Answer 1

扬_灵 2020-05-28 17:49:38

同学你好，前端的mock数据常用的手段有两种：一是直接将模拟数据写在代码里面，还有一种是使用Mock.js来模拟数据,

Mock.js的核心就是通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求：

浏览器中发送异步请求，是通过 new XMLHttpRequest 创建了一个请求对象，mock.js内部会创建一个MockXMLHttpRequest来替代原生的XMLHttpRequest，如果有原生的XHR请求来，则拦截，替换成MockXMLHttpRequest对象，然后再匹配对应的url，如果没有，就发送网络请求。在代码注释中说明了为什么要重写：

“关键属性 readyState、status、statusText、response、responseText、responseXML 是 readonly，所以，试图通过修改这些状态，来模拟响应是不可行的。 因此，唯一的办法是模拟整个 XMLHttpRequest，就像 jQuery 对事件模型的封装。”

这样做的代价也大，不过被 MockJS 重写过的 XHR 对象，上述的关键属性早已不是 readonly，可以自由读写。 由此根据 XHR 生命周期中的几个函数做包装，打印每个阶段的数据状态， 这几个阶段在 MDN 中有详细的描述。同时它还能伪造各种随机数据，通过mockjs我们能很方便的实现简单的mock效果，如果不能解决你的问题，可以继续追问。

• 慕少9097161 #1

  麻烦您讲一下为什么框架中的mock可以在浏览器network中看到，自己项目使用mock/index.js和mock/mock-server.js可以发送请求但是在浏览器network中看不到，是因为框架做了其他处理吗？谢谢！

• 扬_灵 回复 慕少9097161 #2

  同学你好，这是因为使用mock获取本地文件中的数据的时候，请求在发出去之前就被mock拦截了。被mock拦截之后使用其模拟请求对象 MockXMLHttpRequest 进行响应，即此时不发送 XHR 请求，就没有发生网络请求了，所以在network中看不到记录，你可以看一下这篇文档，https://www.jb51.net/article/140109.htm