前端处理axios请求下载后端返回的文件流

需求：点击按钮下载文件，请求后端接口，后端返回文件流，如果遇到错误信息并不能简单的res.message拿到错误提示，而且想要正常下载前端也需要做些处理。

1.请求接口要加上响应类型为blob， responseType: ‘blob’，如：

functionlogsDownload(params){return axios.get('xxx/xxx/xxx',{
   params,responseType:'blob'})}

2.定义一个下载的方法

functiondownload(fileName ='log',type:'txt'| 'json,file:Blob){const blob =newBlob([file]);// 获取heads中的filename文件名const downloadElement = document.createElement('a');// 创建下载的链接const href = window.URL.createObjectURL(blob);
    downloadElement.href = href;// 下载后文件名
    downloadElement.download =`${fileName}.${type}`
    document.body.appendChild(downloadElement);// 点击下载
    downloadElement.click();// 下载完成移除元素
    document.body.removeChild(downloadElement);// 释放掉blob对象
    window.URL.revokeObjectURL(href);}

3.借助FileReader对象实现，FileReader.readAsText(data)开始读取指定的Blob中的内容。
result属性中将包含一个字符串以表示所读取的文件内容。
读取操作完成时触发FileReader.onload()，在这里通过reader.result拿到读取的文件内容（即后端返回值），然后对其json序列化，即可拿到后端返回的message，然后进行相应的展示即可。

// 定义一个读取文件的方法asyncfunctionreadFileAsText(file:File){const fileReader =newFileReader()let text
      awaitnewPromise(resolve=>{
         fileReader.onLoad=()=>{
            text = fileReader.result
            resolve(true)}
        fileReader.readAsText(file,'utf8')})return text ||''}

4.请求成功和失败的返回结果是不同
请求下载一个文件，请求成功时返回的是一个文件流，type是对应文件类型，例如：text/xml，正常导出文件； 而请求失败的时候返回的是json ，type为application/json，不会处理错误信息，而是直接导出包含错误信息的文件。
但是无论成功还是失败，返回的结果都是blob格式的文件流。
因此可以通过返回的blob数据type类型进行区分，如果type是文件类型，导出文件，如果type是json则把blob数据转为string，处理错误信息。
在响应拦截器那里加入以下，需要判断如果时文件流直接返回的情况

// 响应拦截器
banseInstance.interceptors.response.use(response=>{...// 文件流直接返回if(response .request.responseType ==='blob'){if(response .data.type ==='application/json'){const res =awaitreadFileAsText(response.data)

        ElMessage.error(JSON.parse(res).message ||'下载失败')returnfalse;}else{return response .data;}}...}

1. 点击按钮下载

consthandleDown=()=>{const fileName ='xxxx'const file =awaitlogsDownload(params)if(file){download(fileName,'txt', file)
     ElMessage.success('下载成功')}}