mysql blob json 乱码_responseType设置了blob，实际返回了JSON格式的错误信息的处理方式...

在请求下载的时候，为了解决乱码问题，我们都会给 XHR 的 responseType 指定为 blob 或者 arraybuffer。但是在实际下载的过程中，后端返回的不一定是二进制流数据，也有可能是 json 格式的错误信息，比如导出数据量过大，需要缩小范围，或者查询结果出错等错误信息，需要在前端页面以 toast 的方式提示给使用者。

假如有以下代码

// 下载

async function downloadFn(params) {

const result = await axios.get(

url,

{

params,

responseType: 'blob'

}

)

downloadBlob(result)

}

// 通用的下载函数

function downloadBlob(response, fileName) {

const blob = new Blob([response.data], { type: 'application/octet-stream' })

if (fileName === undefined) {

fileName = decodeURIComponent(

response.headers['content-disposition'].split(';')[1].split('=')[1]

)

}

if (navigator.msSaveBlob) {

navigator.msSaveBlob(blob, fileName)

} else {

const linkElement = document.createElement('a')

linkElement.download = fileName

linkElement.style.display = 'none'

linkElement.href = URL.createObjectURL(blob)

document.body.appendChild(linkElement)

const clickEvent = document.createEvent('MouseEvents')

clickEvent.initEvent('click', false, false)

linkElement.dispatchEvent(clickEvent)

URL.revokeObjectURL(linkElement.href) // 释放URL 对象

document.body.removeChild(linkElement)

}

}

那么如果后台没有返回二进制流数据，而是返回了 JSON 数据格式，那么我们捕捉到的错误信息是 downloadBlob 函数中的response.headers['content-disposition']为undefined，undefined是不能进行 split 方法的。

为了解决这个问题，新增了一个方法

// 记住，这个地方传入的是response，而不是请求拿到的response.data

function judgeErrorByResponseType(response) {

return new Promise((resolve, reject) => {

if (response.headers['content-type'].includes('json')) {

// 此处拿到的data才是blob

const { data } = response

const reader = new FileReader()

reader.onload = () => {

const { result } = reader

const errorInfos = JSON.parse(result)

const { msg } = errorInfos

reject(new Error(msg))

}

reader.onerror = err => {

reject(err)

}

reader.readAsText(data)

} else {

resolve(response)

}

})

}

当然，我前端在这个方法的编写的时候对后台也是有要求的，就是要他准确的返回 content-type。如果是二进制流数据，content-type就必须是application/octet-stream，如果是 JSON 数据格式的错误信息，就必须得返回application/json。因为本次实践中我发现了后台有一些不规范的地方，就是不管返回的是什么数据类型，headers 永远是Content-Type: application/json;charset=UTF-8。

WX20200807-101916.png

上面的judgeErrorByResponseType方法非常简单，其实只是做一次记录，只要对 fileReader 有了解相信都可以写出来，只是方便以后用到懒得再写一次。当然在使用过程中，只需要在下载之前做一个判断即可

async function downloadFn(params) {

const result = await axios.get(

url,

{

params,

responseType: 'blob'

}

)

const response = await judgeErrorByResponseType(result)

downloadBlob(response)

}