Vue3 - 判断接口返回的二进制文件流 Blob 是二进制文件流对象还是 JSON 错误提示信息,当请求设置 responseType: blob 时捕获后端状态码返回的是可下载文件还是下载失败提示

前言

如果您需要 Vue2 版本教程,请访问 这篇文章。

本文实现了 在 Vue3 项目开发中,解决下载 Blob 二进制文件流对象时,无法区分是正常文件流还是错误的 json 数据信息问题,

默认无论成功还是失败永远返回 blob 对象,但使用本方法后,您可以轻松判断接口返回了【二进制文件流】还是【失败对象错误信息】。


如下图所示(调用同一个接口),当是正常的文件流时进行下载,否则就用接口返回的错误信息提示用户,

当把请求 responseType 设置为 blob 时,如果接口返回文件流时正常下载,反之拿到 JSON 数据提示错误信息。

示例代码干净整洁,无论是 JS 还是 TS 都可以使用!

在这里插入图片描述

示例代码

您只需要将接口换成您的,一键复制核心代码即可。

如下代码所示,提供了判断方法,也提供了下载二进制文件流的方法。

猜你喜欢

转载自blog.csdn.net/weixin_44198965/article/details/135299925