axios 使用 blob 下载文件怎么兼容 JSON 出错状态

正常情况下，这代码是可以下载文件

export function downloadMedia(id) {
    return request({
        url: '/cases/download',
        method: 'get',
        responseType: 'blob',
        params: {
            id
        }
    })
}

但是如果后端返回出错信息json,那么这个时候axios不能正常捕获因为responseType: 'blob' 这个怎么处理

{
    "msg":"您没有权限下载文件!",
    "data":[],
    "code":400
}

axios blob json

91it

Laravel 9.x 译者 357 声望

一个会写代码的产品

1 人点赞

推荐文章：

更多推荐...

博客

在 vue-cli 3.0 + 里面对 axios 封装 18 / 3 |

91it

Laravel 9.x 译者 357 声望

最佳答案

自问自答.我在axios里面拦截response处理.

instance.interceptors.response.use(
    async(response) => {

        // token过期,服务器返回新的token
        let token = response.headers.authorization
        if (token) {
            store.dispatch('auth/refreshToken', token)
        }

        // 兼容blob下载出错json提示
        if (response.request.responseType === 'blob' && response.data instanceof Blob && response.data.type && response.data.type.toLowerCase().indexOf('json') != -1) {
            return new Promise((resolve, reject) => {
                let reader = new FileReader()
                reader.onload = () => {
                    response.data = JSON.parse(reader.result)
                    resolve(Promise.reject(response.data.msg))
                }

                reader.onerror = () => {
                    reject(response.data.msg)
                }

                reader.readAsText(response.data)
             })
        }
}
)

3年前评论

讨论数量: 3

91it

Laravel 9.x 译者 357 声望

自问自答.我在axios里面拦截response处理.

instance.interceptors.response.use(
    async(response) => {

        // token过期,服务器返回新的token
        let token = response.headers.authorization
        if (token) {
            store.dispatch('auth/refreshToken', token)
        }

        // 兼容blob下载出错json提示
        if (response.request.responseType === 'blob' && response.data instanceof Blob && response.data.type && response.data.type.toLowerCase().indexOf('json') != -1) {
            return new Promise((resolve, reject) => {
                let reader = new FileReader()
                reader.onload = () => {
                    response.data = JSON.parse(reader.result)
                    resolve(Promise.reject(response.data.msg))
                }

                reader.onerror = () => {
                    reject(response.data.msg)
                }

                reader.readAsText(response.data)
             })
        }
}
)

3年前评论

xswlhhh

0 声望

我是直接根据返回结果 res.data.type === 'application/json' 判断下载还是提示错误

3年前评论

V2R

课程读者 25 声望

谢谢分享

3年前评论

91it （楼主）

觉得不错,给我点个赞 ^_^

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

axios 使用 blob 下载文件怎么兼容 JSON 出错状态

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

axios 使用 blob 下载文件怎么兼容 JSON 出错状态

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录