前端兼容处理接口返回的文件流或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);
})
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值