前端兼容处理接口返回的文件流或json数据

记一次 接口返回文件流或json类型数据时，前端的兼容处理。
要求调用接口上传文件，成功时，返回值为json，提示json中的信息；失败时，返回值为流，下载的流文件。需要前端进行兼容判断。

大致思路：设置responseType: 'blob'作为返回值的解析方式，统一以blob的方式解析，然后通过FileReader.readAsText读取blob数据为string，根据string能否解析为json判断接口返回的数据类型。

axios({
    
    
	...	// 请求参数
	responseType: 'blob' // 设置responseType: 'blob'作为返回值的解析方式，统一以blob的方式解析
}).then(res => {
    
    
	// 通过FileReader读取blob数据为string
	const reader = new FileReader();
	reader.onload = event => {
    
    
		try {
    
    
			// 将读取的string转换为json
			// 若果能转换成功 => 接口返回的是json数据，提示报错信息
			const json = JSON.parse(event.target.result);
			if (json.success) {
    
    
				this.$message.success(json.msg)
			}
		} catch (err) {
    
    
			// 不能被转换成json => 接口返回的是blob, 下载blob文件
			let href = window.URL.createObjectURL(res )
			let saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
			saveLink.href = href
			saveLink.download = filename
			document.body.appendChild(saveLink)
			let event = document.createEvent('MouseEvents')
			event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
			saveLink.dispatchEvent(event)
			
			// 删除标签  解决火狐兼容问题(异步删除)
			setTimeout(() => {
    
    
			    document.body.removeChild(saveLink)
			    window.URL.revokeObjectURL(href)
			}, 0)
		}
	};
	reader.readAsText(res);
})