Vue responseType中blob和arrayBuffer下载文件以及JSON处理

概述

项目里面总会有用到需要下载文件的功能，但同时又需要验证登录状态，恰好es6里面提供responseType blob这种文件流的异步方式。最近刚好碰到一个问题，如果后端接口返回正常的文件流时可以正常下载保存，当用户未登录或者获取文件异常的时候接口会返回json提示，如下：

{
    code: 500,
    message: '未登录，请登陆后再下载'
}

这样一来前端的api歇菜了，不过不要慌，总有办法解决！检查代码后发现前端只接收到了二进制文件流，并没有对接收到文件流特殊的情况下做json处理，而正常获取到文件流的时候接口返回的content-type会等于application/octet-stream，类似未登录这种情况会返回content-type会等于application/json，根据这一特性，我们可以进行这样的改造。

this.instance.request(config).then(res => {
    const { data } = res
    if (data.type === 'application/json') {
      const reader = new FileReader()
      reader.onload = function () {
        const { message } = JSON.parse(reader.result)
        // message 就是我们要的提示文字
      }
      reader.readAsText(data)
    } else {
        // 正常下载保存文件的代码...
        const str = res.headers['content-disposition']
        let filename
        if (str) {
          filename = str.match(/filename=(\S*?)(;|$)/)[1]
        }
        filename = filename || '未命名'
        if (this.isIE()) {
          window.navigator.msSaveOrOpenBlob(data, filename)
        } else {
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(res.data) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = decodeURI(filename) // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        }
    }
})

进一步了解responseType

设置这个值能够改变响应类型。意思就是告诉服务器后端接口那边你要的响应格式。
这张表格，收下吧，也许日后用得上：