zoukankan      html  css  js  c++  java
  • 导出文件,responseType设置了blob,实际返回了JSON格式的错误信息的处理方式

    需求:导出文件

    问题描述:由于后台直接返回的文件流,在请求下载的方法中将XHR 的 responseType 指定为 blob 或者 arraybuffer。但并不是每次的操作都是成功的,所以在接口错误时后台返回的就是不是二进制流格式了。因此这里需要获取到后台反馈的错误信息进行用户提示。

    这时后台返回的数据类型就是这样的:

    而接口返回的是json的数据信息{“msg”: "导出失败", code: 1007}

    解决代码示例:

    getFiles(_path, query) {
        axios({
          method: 'get', // 请求方式
          headers: {
            'Content-Type': 'application/octet-stream',
            'token': store.getters.token
          },
          url: _path, // 请求路径
          params: query,
          responseType: 'blob'
        }).then(res => {
          const data = res.data;
          if (res.data.type == 'application/json') {
         // json信息展示
    this.handlerResponseError(data); } else { // 下载文件流 const filename = this.getCaption(res.headers['content-disposition']); const blob = new Blob([res.data], { type: 'application/octet-stream' }); const objectUrl = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = objectUrl; link.setAttribute('download', filename); document.body.appendChild(link); link.click();// 点击 document.body.removeChild(link); // 下载完成移除元素 window.URL.revokeObjectURL(URL); // 释放掉blob对象 } }).catch((err) => { console.log(err, 'err'); }); }, handlerResponseError(data) { const _this = this; const fileReader = new FileReader(); fileReader.onload = function() { try { const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据,后台转换失败 console.log('后台返回的信息',jsonData.msg); // dosomething…… } catch (err) { // 解析成对象失败,说明是正常的文件流 console.log('success...'); } }; fileReader.readAsText(data); },  
    // or
    handlerResponseError2(data){
      
        const reader = new FileReader();
        reader.onload = (e) => {
        const {message} = JSON.parse(reader.result);
          this.$message.error("err:" + message);
        }
        reader.readAsText(data);
    }
    
    

    PS:MDN官方解释:Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据(https://developer.mozilla.org/zh-CN/docs/Web/API/Blob)。

  • 相关阅读:
    【转】虚拟机 NAT网络设置
    [转载]应用 Valgrind 发现 Linux 程序的内存问题
    Visual Studio 代码格式化插件(等号自动对齐、注释自动对齐等)
    【转】链接任意目录下库文件(解决错误“/usr/bin/ld: cannot find -lxxx”
    C语言实现封装、继承和多态
    美国专利搜索网站
    【转】基于OCS实现高速缓存
    【转】防止网页被搜索引擎、爬虫和网页采集器收录或克隆复制的方法汇总
    [转]机器学习和计算机视觉----数学基础
    [转]机器学习与数据挖掘的学习路线图
  • 原文地址:https://www.cnblogs.com/min77/p/13858415.html
Copyright © 2011-2022 走看看