Blob格式转json格式,拿到后端返回的json数据

简介: 文章介绍了如何将后端返回的Blob格式数据转换为JSON格式,并处理文件下载和错误提示。

Blob格式转json格式,拿到后端返回的json数据

在进行文件下载的时候,我们通过blob,进行下载文件,需要axios设置responseType

responseType: 'blob',
 axios({
   
          ...xxx,
        responseType: 'blob',
    }).then(res => {
   
          if (!res || !res.headers['content-disposition']) {
   
               if (res && res.status === 200 && res.data) {
   

                   //转换步骤
                   const file = new FileReader();
                   file.readAsText(res.data, 'utf-8');
                   file.onload = function () {
   
                       const obj = JSON.parse(file.result);
                       console.log(obj, 'obj')
                       if (obj.code === '10000') {
   
                           message.error(obj.message || '下载失败!')
                       }
                       return obj;//此时message为转化好的json格式
                   }
                   return false


               } else {
   
                   message.error(res.message || '下载失败!')
                   return
               }
           }
           if (res && res.status === 200 && res.data) {
   
               const {
    data, headers } = res
               let fileName
               if (headers['content-disposition']) {
   
                   fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1')
               } else {
   
                   fileName = data.fileName
               }
               // 此处当返回json文件时需要先对data进行JSON.stringify处理,其他类型文件不用做处理
               const blob = new Blob([data], {
    type: headers['content-type'] })
               const dom = document.createElement('a')
               const downUrl = window.URL.createObjectURL(blob)
               dom.href = downUrl
               dom.download = decodeURIComponent(fileName)
               dom.style.display = 'none'
               document.body.appendChild(dom)
               dom.click()
               dom.parentNode.removeChild(dom)
               window.URL.revokeObjectURL(url)
               return res
           }
           message.error(res.message || '下载失败!')
       })
       .catch(err => {
   
           // error(err || '下载失败!')
           console.log('下载失败')
       })

但是有时候文件过大或者其他原因,后端不让我们下载,会直接返回json,这就恶心,明明要接受blob,又给我个json,
所以就需要进行判断然后转换blob,然后提醒:

正常情况下:
在这里插入图片描述
非正常情况:
在这里插入图片描述

我们需要接收到后转成json:

 //转换步骤
      const file = new FileReader();
       file.readAsText(res.data, 'utf-8');
       file.onload = function () {
   
           const obj = JSON.parse(file.result);
           console.log(obj, 'obj')
           if (obj.code === '10000') {
   
               message.error(obj.message || '下载失败!')
           }
           return obj;//此时message为转化好的json格式
       }

在这里插入图片描述
file.onload方法会自动执行,所以直接在这个里面增加提醒就行。嗯,就这样。

目录
相关文章
|
3天前
|
JSON JavaScript 数据格式
vue写入json数据到文本中+vue引入cdn的用法
vue写入json数据到文本中+vue引入cdn的用法
|
1天前
|
XML JSON JavaScript
js的json格式
js的json格式
|
2天前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
15 1
|
28天前
|
存储 JSON API
淘系API接口(解析返回的json数据)商品详情数据解析助力开发者
——在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦! 淘宝API接口(如淘宝开放平台提供的API)允许开发者获取淘宝商品的各种信息,包括商品详情。然而,需要注意的是,直接访问淘宝的商品数据API通常需要商家身份或开发者权限,并且需要遵循淘宝的API使用协议。
淘系API接口(解析返回的json数据)商品详情数据解析助力开发者
|
16天前
|
JSON JavaScript 前端开发
Haskell中的数据交换:通过http-conduit发送JSON请求
Haskell中的数据交换:通过http-conduit发送JSON请求
|
19天前
|
存储 JSON API
Python编程:解析HTTP请求返回的JSON数据
使用Python处理HTTP请求和解析JSON数据既直接又高效。`requests`库的简洁性和强大功能使得发送请求、接收和解析响应变得异常简单。以上步骤和示例提供了一个基础的框架,可以根据你的具体需求进行调整和扩展。通过合适的异常处理,你的代码将更加健壮和可靠,为用户提供更加流畅的体验。
54 0
|
1月前
|
JSON 前端开发 JavaScript
|
1月前
|
存储 SQL JSON
【Azure Logic App】微软云逻辑应用连接到数据库,执行存储过程并转换执行结果为JSON数据
【Azure Logic App】微软云逻辑应用连接到数据库,执行存储过程并转换执行结果为JSON数据
【Azure Logic App】微软云逻辑应用连接到数据库,执行存储过程并转换执行结果为JSON数据
|
1月前
|
JSON 前端开发 API
【淘系】商品详情属性解析(属性规格详情图sku等json数据示例返回参考),淘系API接口系列
在淘宝(或天猫)平台上,商品详情属性(如属性规格、详情图、SKU等)是商家在发布商品时设置的,用于描述商品的详细信息和不同规格选项。这些信息对于消费者了解商品特性、进行购买决策至关重要。然而,直接通过前端页面获取这些信息的结构化数据(如JSON格式)并非直接暴露给普通用户或开发者,因为这涉及到平台的商业机密和数据安全。 不过,淘宝平台提供了丰富的API接口(如淘宝开放平台API),允许有资质的开发者或合作伙伴通过编程方式获取商品信息。这些API接口通常需要注册开发者账号、申请应用密钥(App Key)和秘钥(App Secret),并遵守淘宝的API使用协议。
|
1月前
|
JSON Java Android开发
Android 开发者必备秘籍:轻松攻克 JSON 格式数据解析难题,让你的应用更出色!
【8月更文挑战第18天】在Android开发中,解析JSON数据至关重要。JSON以其简洁和易读成为首选的数据交换格式。开发者可通过多种途径解析JSON,如使用内置的`JSONObject`和`JSONArray`类直接操作数据,或借助Google提供的Gson库将JSON自动映射为Java对象。无论哪种方法,正确解析JSON都是实现高效应用的关键,能帮助开发者处理网络请求返回的数据,并将其展示给用户,从而提升应用的功能性和用户体验。
47 1