在前后端分离大势所趋的情况下 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
并没有发送 xhr
nice,用起来感觉还是很上手的
mock 验证数据
来一个随机“取名”