技术分享 Technology to share

前端也想玩 mock

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


mock 验证数据


来一个随机“取名”


扩展连接 mockjs官网 yapi

上一篇: three.js 第一人称初试

下一篇: echart动态更新数据