- 根据需要,项目引入了mock,一切就安装就绪妥当之后,发现项目部分功能模块异常;
- 这个功能模块使用了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)
- 快速定位问题,发现是转json的时候报错
- 继续看调用栈,找到这个参数的来源,发现GLTFLoader的原理是用原生的ajax请求
- 思考: 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)
}
})()