axios 异步下载获取文件类型(获取响应headers相关信息)

我做的是异步请求下载文件,代码如下: 

    /**
     * 下载文件
     */
    download_file(i){
      window.console.log(this.file_list_data[i].id);
      let that = this;
      this.$axios({
        method: 'get'
        ,url:url
        ,headers:{'token':localStorage.getItem('token'),'Content-Type': 'application/x-www-form-urlencoded'}
        
        ,responseType:'blob'
        ,params:{
          file:that.file_list_data[i].id,//携带请求数据
        }
      })
      .then(function (res) {
        if (res.status!=200) {
          //that.$Message.error("请求服务异常,请联系管理员:"+res.status);//请求失败提示
          return false;
        }
        window.console.log(res.headers)
        window.console.log('Content-Type:',res.headers['content-type'])
        /**
         * 下载的文件后缀
         */
        let file_type='';
        switch (res.headers['content-type']) {
          case 'application/pdf':
            file_type='.pdf';
            break;
          case 'image/jpeg':
            file_type='.jpg ';
            break;
          case 'image/gif':
            file_type='.gif ';
            break;
          case 'image/png':
            file_type='.png ';
            break;
          case 'application/x-zip-compressed':
            file_type='.zip ';
            break;
        
          default:
            return false;
            break;
        }
        
        const content = res.data
        const blob = new Blob([content])
        const fileName = that.file_list_data[i].name+file_type;
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })

      .catch(function (error) {
        //that.$Message.error('请求服务异常');//异常提示
        window.console.log(error);
      });
    }

其中获取响应headers的是:

res.headers['content-type']//此处获取的是文件类型
//如果要获取其他的值将上述“''”内的值换为要获取的头标识,注意此处获取 key需全小写

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: axios是一个基于Promise的HTTP客户端库,支持在浏览器和Node.js中发送HTTP请求。当使用axios下载文件时,如果需要指定响应的数据类型为blob,则可以使用responseType配置选项。 在使用responseType为blob时,如果后端出现错误,可以通过catch捕获错误信息并处理。例如: ```javascript axios({ method: 'get', url: '/download/file', responseType: 'blob' }).then((response) => { // 处理下载文件 }).catch((error) => { // 处理捕获到的错误信息 }); ``` 在上述代码中,当后端出现错误时,会触发catch块中的代码,可以在这里处理错误信息,例如提示用户下载失败或重新尝试下载等操作。 ### 回答2: 在使用axios进行文件下载请求时,我们可以通过设置responseType为blob来获取文件的二进制数据。然而,当后端返回的数据不是预期的文件类型时,可能会出现错误。为了捕获后端错误问题,我们可以使用try-catch语句来处理异常。 首先,我们需要设置axios响应拦截器,用于在请求返回时捕获错误。在拦截器中,我们将判断返回数据的类型,如果不是预期的blob类型,则抛出一个自定义的错误。 ```javascript axios.interceptors.response.use( response => { if (response.config.responseType === 'blob' && response.data.type !== 'application/octet-stream') { throw new Error('后端返回数据异常') } return response }, error => { return Promise.reject(error) } ) ``` 接下来,在发起文件下载请求时,我们可以使用try-catch语句来包裹axios请求,并处理可能抛出的错误。 ```javascript try { const response = await axios.get('/download', { responseType: 'blob' }) // 文件下载成功的逻辑处理 } catch (error) { // 捕获并处理后端错误 console.error(error.message) } ``` 这样,当后端返回的数据不是预期的blob类型时,我们就可以捕获到错误,并进行相应的处理,例如输出错误信息到控制台。 注意,由于axios是基于Promise的异步请求库,我们使用了async/await来进行异步处理。当然,你也可以使用.then()来处理异步请求。以上代码只是一个简单示例,你可以根据自己的需求进行进一步的优化和处理。 ### 回答3: 在使用axios进行文件下载请求时,可以设置responseType为blob来获取二进制数据作为响应。但是在这种情况下,由于后端错误的情况下,返回的响应数据类型可能依然是blob,而不是正常的json数据。因此,需要在前端代码中进行相应的处理来捕获后端错误。 首先,在axios请求中设置responseType为blob: ```javascript axios.get(url, { responseType: 'blob' }) ``` 之后,在返回的响应中,可以通过判断响应的Content-Type来确定响应数据类型。如果是对应的错误类型,则可以通过读取blob数据并进行相应的处理。 ```javascript axios.get(url, { responseType: 'blob' }).then(response => { const contentType = response.headers['content-type']; if (contentType === 'application/json') { // 正常情况 // 处理响应数据 } else { // 错误情况 response.blob().then(blobData => { // 处理错误数据 }); } }).catch(error => { // 请求错误 console.error(error); }); ``` 在错误情况下,使用response.blob()将blob数据转换为对应的Blob对象,并可以进行进一步的操作。比如,可以读取该Blob对象中的错误信息,并根据具体情况进行相应的处理,比如提示错误信息给用户或者进行其他的业务操作。 需要注意的是,设置responseType为blob时,后端返回的响应必须包含相应的Content-Type头部信息,以便前端能正确判断响应数据类型。否则,需要与后端进行沟通,确保正确返回对应的Content-Type信息

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值