たとえば、フロントエンドとバックエンドの契約では、ダウンロードは成功してバイナリ ストリームが返されますが、ダウンロードが失敗するとオブジェクト {code: 0, msg: 'failurereason'} が返されません。
問題: ファイルをダウンロードするとき、axios は responseType: 'blob' を設定します。このとき、バックグラウンドから返されたデータは強制的に blob タイプに変換されます。バックグラウンドが失敗したオブジェクトを返した場合、フロントエンドはそれを認識しません。正常に処理されると、未定義という名前のファイルが取得されます。
解決策: try コード ブロックで、axios が blob 形式に変換したリソースを json 形式に変換してみます。エラーが報告されない場合は、サーバーがオブジェクトを返し、ダウンロードが失敗したことを意味します。オブジェクトが catch に入った場合は、戻り値がバイナリ ストリームであることを意味します。
主な技術ポイント: FileReader window.URL.createObjectURL ダウンロード用の Blob タグ
axios配置：
axios({
method: ‘post’,
baseURL: ‘’,
url: ‘’l,
timeout: 3000,
headers: {
},
data: options.method.toLowerCase() !== 'get' ? options.data : undefined,
responseType: 'blob'
}).then(
res => {
const data = res.data
// 有可能下载失败，比如返回{code: 0},但设置了responseType: 'blob'，axios会把data强制转为blob，导致下载undefined.excel（后缀取决于文件类型，这里只是举例）
// 解决：将已转为blob类型的data转回json格式，判断是否下载成功
const r = new FileReader()
r.onload = function () {
// 如果JSON.parse(this.result)不报错，说明this.result是json字符串，则可以推测是下载报错情况下返回的对象，类似于{code: 0}
// 如果JSON.parse(this.result)报错，说明是下载成功，返回的二进制流，则进入catch进行后续处理
try {
const resData = JSON.parse(this.result) // this.result为FileReader获取blob数据转换为json后的数据，即后台返回的原始数据
// 如果执行到这里，说明下载报错了，进行后续处理
} catch (err) {
// 下载正常处理
let fileName = res.headers['content-disposition']
// 获取文件名
if (fileName && fileName.length >= 2) {
fileName = fileName.split('=')[1]
}
fileName = decodeURIComponent(fileName)
// 兼容ie11
if (window.navigator.msSaveOrOpenBlob) {
try {
const blobObject = new Blob([data])
window.navigator.msSaveOrOpenBlob(blobObject, fileName)
} catch (e) {
console.log(e)
}
return
}
// a标签实现下载
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
resolve(fileName)
}
}
r.readAsText(data) // FileReader的API
}).catch(res => {
console.log(res)
})
フロントエンド ファイル エクスポートのために responseType を BLOB に設定するときに問題が発生しました