在前后端分离大势所趋的情况下 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，用起来感觉还是很上手的
