文件下载失败获取报错信息(blob流转json)

问题来源

这里下载的文件内容是压缩包格式,那生成压缩包的过程中可能会出现压缩包里没有可生成文件的情况,那么这种情况下,接口里面返回的就不是blob文件流而是json格式的内容包括code,message等等,同时前端在发送请求时需要携带responseType为blob格式,这就代表着,即使后端发送的回调不是blob文件流,前端也会自动转成文件流,并且继续走下载。

解决方案

这里采取的方案简化来说就是分为三部分,通过blob流当中的type来识别他是正异常情况,如果是异常,把blob流转成json然后找到并渲染message

1.判断blob类型

判断这里用的是res.type,如果是text/xml就说明正常,如果是application/json就说明不正常。需要转换。
在这里插入图片描述
在这里插入图片描述

2.转换blob类型为json && 获取json中message并弹窗提示

转换用的FileReader,

 let reader = new FileReader()
     reader.readAsText(res, 'utf-8')
     reader.onload = e => {
     let readerText= reader.result
     let obj= {}
     obj = JSON.parse(readerText)
     this.$message.error(obj .message)
     }
     return false;

这里的FileReader是一个文件读取对象,readAsText是一个文件转换文本的方法。这个方法结束时会自动调用onload方法,onLoad方法中去获取返回值的result 结果参数,最终获取到message

### 关于 Axios 使用 `responseType` 为 `'blob'` 的请求失败报错信息及其解决方案 当使用 Axios 进行文件下载并将 `responseType` 设置为 `'blob'` 或 `'arraybuffer'` 时,如果请求失败并返回 JSON 错误信息,则需要特殊处理这些响应数据。以下是详细的分析和解决方案。 #### 请求失败场景下的错误处理逻辑 在封装的 Axios 中可以针对返回的数据类型进行判断,并根据不同情况采取不同的处理方式: 1. **检测返回数据是否为 Blob 类型** 如果请求失败且后端返回的是 JSON 数据而非实际文件流,在浏览器中该 JSON 数据会被解析成 Blob 对象[^2]。因此可以通过以下代码片段来验证返回值是否为 Blob 类型: ```javascript if (error.response && error.response.data instanceof Blob) { // 处理 Blob 类型的错误信息 } ``` 2. **读取 Blob 数据中的错误消息** 当确认返回值为 Blob 后,可利用 `FileReader` 将其换为字符串形式以便进一步解析其中的内容。具体实现如下所示: ```javascript const fileReader = new FileReader(); fileReader.readAsText(error.response.data, 'utf-8'); fileReader.onload = () => { try { const result = JSON.parse(fileReader.result); console.error('Error from server:', result.message || result.msg || 'Unknown Error'); } catch (e) { console.error('Failed to parse error response as JSON:', e); } }; ``` 3. **综合解决方案** 下面提供了一个完整的封装函数用于统一管理此类问题的发生与解决办法。此函数不仅能够捕获异常还支持自定义提示语句等功能。 ```javascript import axios from 'axios'; export default function downloadFile(url, params = {}, config = {}) { return axios.post(url, params, { ...config, responseType: 'blob', }).then((response) => { const contentDisposition = response.headers['content-disposition']; let fileName = ''; if (contentDisposition) { const matches = /filename=([^;]+)/.exec(contentDisposition); if (matches != null && matches.length > 1) { fileName = decodeURIComponent(matches[1].trim().replace(/"/g, "")); } } const linkElement = document.createElement('a'); const blob = new Blob([response.data]); linkElement.href = URL.createObjectURL(blob); linkElement.download = fileName; linkElement.click(); setTimeout(() => { URL.revokeObjectURL(linkElement.href); }, 0); return Promise.resolve(fileName); }).catch((error) => { if (error.response && error.response.data instanceof Blob) { const reader = new FileReader(); reader.onerror = () => { throw new Error("An unexpected error occurred while reading the error message."); }; reader.onloadend = () => { try { const json = JSON.parse(reader.result.toString()); alert(json.message || json.msg || "Download failed due to an unknown reason."); } catch (parseErr) { alert("The server returned invalid data or there was a parsing issue with the error message."); } }; reader.readAsText(error.response.data, 'utf-8'); return Promise.reject(new Error("Request failed and could not process the error.")); } else { throw error; } }); } ``` 上述代码实现了对文件下载过程中可能出现的各种状况的有效应对措施,包括但不限于网络中断、服务器内部错误等情况。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃巧克li

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值