请求为blob,但是返回json格式,如何处理

在 Vue 3 中,如果你收到一个本应该是 blob 但实际上是 json 格式的响应,并且你错误地尝试使用 FileReader 来读取它,这实际上是不必要的,因为 json 数据已经是文本格式,可以直接被 JavaScript 处理。

但是,如果你确实收到的是二进制数据(可能是以 arraybufferblob 形式),并且这些数据实际上包含了 json 格式的文本,那么你需要使用 FileReader 来读取这些数据,并将其转换为文本,然后再解析为 JSON 对象。

下面是一个处理这种情况的示例:

javascript 复制代码
axios({  
  method: 'get',  
  url: '你的API地址',  
  responseType: 'blob' // 假设后端错误地返回了blob,但内容实际上是json格式的文本  
})  
.then(response => {  
  // 创建一个FileReader对象来读取blob数据  
  const reader = new FileReader();  
  reader.readAsText(response.data, 'utf-8'); // 读取blob数据为文本  
  reader.onload = function (e) {  
    try {  
      // 将读取到的文本解析为JSON对象  
      const jsonData = JSON.parse(e.target.result);  
      // 在这里使用解析后的JSON数据  
      console.log('jsonData:', jsonData);  
      // 根据返回的json数据做不同的操作  
      // ...  
    } catch (error) {  
      // 处理解析JSON时可能出现的错误  
      console.error('Error parsing JSON:', error);  
    }  
  };  
  reader.onerror = function (error) {  
    // 处理FileReader可能出现的错误  
    console.error('FileReader error:', error);  
  };  
})  
.catch(error => {  
  // 处理axios请求时可能出现的错误  
  console.error('Error fetching data:', error);  
});

在JavaScript中,由于浏览器环境的限制,文件读取操作通常是异步的,包括使用FileReader API 读取二进制文件内容。这是因为读取文件涉及到磁盘I/O操作,这可能需要一些时间,而JavaScript是单线程的,如果进行同步读取,可能会阻塞整个页面,导致用户体验下降。

因此,尽管有时我们可能希望同步读取文件内容以便更直接地处理数据,但在Web浏览器中通常不支持同步文件读取。FileReader API 没有提供同步读取的方法,所有的读取操作都是通过事件驱动的异步方式完成的。

相关推荐
拓端研究室16 分钟前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子1 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W3 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端4 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~4 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程4 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏4 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083165 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
测试杂货铺6 小时前
Jmeter(六):json断言元件,jmeter参数化实现
jmeter·json