比如前后端約定，下載成功返回二進制流，下載失敗返回對象{code: 0, msg: ‘失敗原因’}
問題：當下載文件時，axios配置responseType: ‘blob’，此時后台返回的數據會被強制轉為blob類型；如果后台返回失敗對象，前端也無法得知，如果按正常處理會得到名為undefined的文件。
解決：在try代碼塊里面嘗試將axios已經轉成blob格式的res轉回json格式，如果不報錯說明服務端返回的是對象，表示下載失敗；如果進入catch說明返回的是二進制流。
主要技術點：FileReader window.URL.createObjectURL Blob a標簽實現下載
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)
})
————————————————
版權聲明：本文為CSDN博主「昵稱叫鈴風的小前端」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_37246828/article/details/90080614