1回答

扬_灵

2020-05-28

同学你好，前端的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效果，如果不能解决你的问题，可以继续追问。

1

2

扬_灵

回复

慕少9097161

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

2020-09-03

共2条回复