mockjs拦截的原理及文件下载失败的原因

在开发项目时发现xgplayer的download插件失效，视频下载失败。后面发现，mockjs不仅会影响视频的下载，还会影响其他类型文件的下载，包括图片，视频，excel文件等。为了找到原因就去看了mockjs的部分源码，要明白mockjs下载文件失败的原因，就要搞清楚以下几件事情：

1.mockjs需要拦截的事件有：

 // Event handlers
	    onloadstart         loadstart
	    onprogress          progress
	    onabort             abort
	    onerror             error
	    onload              load     //download
	    ontimeout           timeout
	    onloadend           loadend
	    onreadystatechange  readystatechange   //ajax

可以见到mockjs不仅会拦截readystatechange，还会拦截load事件。

2.如何拦截

handle(event) {
      // 同步属性 NativeXMLHttpRequest => MockXMLHttpRequest
      for (var i = 0; i < XHR_RESPONSE_PROPERTIES.length; i++) {
        try {
          that[XHR_RESPONSE_PROPERTIES[i]] = xhr[XHR_RESPONSE_PROPERTIES[i]];
        } catch (e) {}
      }
      // 触发 MockXMLHttpRequest 上的同名事件
      that.dispatchEvent(new Event(event.type /*, false, false, that*/));
    },

 dispatchEvent(event) {
      var handles = this.custom.events[event.type] || [];
      for (var i = 0; i < handles.length; i++) {
        handles[i].call(this, event);
      }
      var ontype = "on" + event.type;
      if (this[ontype]) this[ontype](event);
  }

mockjs会匹配事件的类型，是否是上面8中类型之一，如果是，就触发mockjs的同名事件。

3.如何放路

// 查找与请求参数匹配的数据模板
	        var item = find(this.custom.options)

	      .........

	        // 如果未找到匹配的数据模板，则采用原生 XHR 发送请求。
	        if (!item) {
	            // 创建原生 XHR 对象，调用原生 open()，监听所有原生事件
	            var xhr = createNativeXMLHttpRequest()
	            this.custom.xhr = xhr

	            // 初始化所有事件，用于监听原生 XHR 对象的事件
	            for (var i = 0; i < XHR_EVENTS.length; i++) {
	                xhr.addEventListener(XHR_EVENTS[i], handle)
	            }

	            // xhr.open()
	            if (username) xhr.open(method, url, async, username, password)
	            else xhr.open(method, url, async)

	            // 同步属性 MockXMLHttpRequest => NativeXMLHttpRequest
	            for (var j = 0; j < XHR_REQUEST_PROPERTIES.length; j++) {
	                try {
	                    xhr[XHR_REQUEST_PROPERTIES[j]] = that[XHR_REQUEST_PROPERTIES[j]]
	                } catch (e) {}
	            }

	            return
	        }

上面可见，mockjs会查找与请求参数匹配的数据模板，如果找不到就采用原生的xhr请求也就是XMLHTTPRequest请求。而如果能够匹配上则会变成mockjsRequest。开始拦截：

 // 找到了匹配的数据模板，开始拦截 XHR 请求
	        this.match = true
	        this.custom.template = item
	        this.readyState = MockXMLHttpRequest.OPENED
	        this.dispatchEvent(new Event('readystatechange' /*, false, false, this*/ ))

看完这些后就能明白使用mockjs时download为什么会失败，因为load事件会被mockjs匹配上，在mockjs的event handles里面。