在前后端分离大势所趋的情况下 mock.js 诞生了
mock 无侵入拦截ajax 原理
我们可以在mockjs里面找到xhr.js 目录结构如下
mock ├─... └─xhr ├─index.js └─xhr.js
摘抄主要注释
/* global window, document, location, Event, setTimeout */ /* ## MockXMLHttpRequest 期望的功能: 1. 完整地覆盖原生 XHR 的行为 2. 完整地模拟原生 XHR 的行为 3. 在发起请求时,自动检测是否需要拦截 4. 如果不必拦截,则执行原生 XHR 的行为 5. 如果需要拦截,则执行虚拟 XHR 的行为 6. 兼容 XMLHttpRequest 和 ActiveXObject new window.XMLHttpRequest() new window.ActiveXObject("Microsoft.XMLHTTP") 关键方法的逻辑: * new 此时尚无法确定是否需要拦截,所以创建原生 XHR 对象是必须的。 * open 此时可以取到 URL,可以决定是否进行拦截。 * send 此时已经确定了请求方式。 规范: http://xhr.spec.whatwg.org/ http://www.w3.org/TR/XMLHttpRequest2/ 参考实现: https://github.com/philikon/MockHttpRequest/blob/master/lib/mock.js https://github.com/trek/FakeXMLHttpRequest/blob/master/fake_xml_http_request.js https://github.com/ilinsky/xmlhttprequest/blob/master/XMLHttpRequest.js https://github.com/firebug/firebug-lite/blob/master/content/lite/xhr.js https://github.com/thx/RAP/blob/master/lab/rap.plugin.xinglie.js **需不需要全面重写 XMLHttpRequest?** http://xhr.spec.whatwg.org/#interface-xmlhttprequest 关键属性 readyState、status、statusText、response、responseText、responseXML 是 readonly,所以,试图通过修改这些状态,来模拟响应是不可行的。 因此,唯一的办法是模拟整个 XMLHttpRequest,就像 jQuery 对事件模型的封装。 // Event handlers onloadstart loadstart onprogress progress onabort abort onerror error onload load ontimeout timeout onloadend loadend onreadystatechange readystatechange */ var Util = require('../util') // 备份原生 XMLHttpRequest window._XMLHttpRequest = window.XMLHttpRequest window._ActiveXObject = window.ActiveXObject
我们可以得出 mock直接重写了 XMLHttpRequest 所以在使用的时候 先引入mock在调用 ajax 才可生效
那么 fetch 可以拦截么?
很可惜现在版本拦截不了 fetch 希望以后可以支持
mock 造“假数据”
在看看 network 中有没有发送xhr
nice,用起来感觉还是很上手的