记录一次使用mockjs出现诡异问题

1. 根据需要,项目引入了mock,一切就安装就绪妥当之后,发现项目部分功能模块异常;
2. 这个功能模块使用了three的GLTFLoader加载器,报错是在GLTFLoader里面抛出的

抛出的异常代码

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at GLTFLoader.parse (GLTFLoader.js:213)
    at Object.onLoad (GLTFLoader.js:145)
    at XMLHttpRequest.<anonymous> (three.module.js:35829)

1. 快速定位问题,发现是转json的时候报错
   
2. 继续看调用栈,找到这个参数的来源,发现GLTFLoader的原理是用原生的ajax请求
   
3. 思考: mock会拦截ajax, 会不会是mock引起的问题, 当我把mock的引入注释掉之后, 模块正常,传入的参数也正常转码

4. 解决办法, 重写mock的send方法,其实最主要的是修改responseType,因为这mock源代码中,responseType是直接为空的

Mock.XHR.prototype.send = (() => {
  const _send = Mock.XHR.prototype.send

  return function() {
    if (!this.match) {
      this.custom.xhr.responseType = this.responseType || ''

      this.custom.xhr.timeout = this.timeout || 0

      this.custom.xhr.withCredentials = this.withCredentials || false

      this.custom.xhr.onabort = this.onabort || null

      this.custom.xhr.onerror = this.onerror || null

      this.custom.xhr.onload = this.onload || null

      this.custom.xhr.onloadend = this.onloadend || null

      this.custom.xhr.onloadstart = this.onloadstart || null

      this.custom.xhr.onprogress = this.onprogress || null

      this.custom.xhr.onreadystatechange = this.onreadystatechange || null

      this.custom.xhr.ontimeout = this.ontimeout || null
    }

    return _send.apply(this, arguments)
  }
})()