vue项目：axios 请求类型为blob类型的接口sucess封装 & err封装

简介

  在现代Web应用中，我们通常会遇到一种交互是文件的上传与下载，而更常用的技术是将文件转唯二进制流来进行处理。此时就需要处理为Blob类型的数据，本文将详细介绍如何在Vue项目中使用Axios处理Blob类型的请求，并进行成功与错误的封装处理

什么是blob类型

  在计算机科学和数据库领域，‌Blob（‌Binary Large Object）‌是一个可以存储二进制文件的容器，‌常用于数据库中以存储大容量的二进制数据，‌如图片、‌音频文件等。‌。由于图片、音频的尺寸较大，‌需要使用特殊的方式来处理，‌如上传、‌下载或存储到数据库中。‌

为什么需要Blob类型？

  在某些情况下，我们需要从服务器下载文件，例如导出Excel表格、下载PDF文档等。此时，服务器通常会返回二进制数据，而不是常规的JSON数据。为了正确处理这些二进制数据，我们需要将请求的响应类型设置为Blob。

使用Axios处理Blob类型的请求

import axios from 'axios';
const downloadFile = async (url, params) => {
  try {
    const response = await axios({
      method: 'get',
      url: url,
      params: params,
      responseType: 'blob', // 设置响应类型为blob
    });
    // 创建一个Blob对象
    const blob = new Blob([response.data], { type: response.headers['content-type'] });
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.setAttribute('download', 'filename.ext'); // 设置下载文件名
    document.body.appendChild(link);
    link.click();
    link.remove();
  } catch (error) {
    handleError(error);
  }
};

const handleError = (error) => {
  // 错误处理逻辑
};
export default downloadFile;

封装成功与错误处理逻辑

主要是用逻辑是在vue项目中对于响应类型为blob类型的下载，以及后端正常抛错但被blob转义为blob如何成功的抛错。在项目中为规范写法，主要会涉及到如下文件的修改和处理：

1. axios.js===>此文件主要用于请求响应拦截的处理

import axios from 'axios'
// HTTPresponse拦截
axios.interceptors.response.use(
    async (bigData) => {
        const { status, statusText, data } = bigData
        if (status === 200) {
		 if (bigData.headers['content-type'].indexOf('application/json') === -1 ) {
                // 针对下载接口做特殊处理，根据content-type 字段来
                return Promise.resolve(data)
            }
                if (data.code === 1000) {
                    return Promise.resolve(data.data)
                } else {
                    return Promise.reject(data)
                }
            }
        } else {
        }
    },
    (error) => {
    },
)

2. request.js =====>编写接口信息

import request from '@/axios'//axios.js所在的目录
export const export = (data) =>
    request({
        url: url,
        method: 'post',
        data,
        responseType: 'blob',
    })

3. 具体页面的导出接口

import { export } from '@request.js'
exportExcel() {
            export(params)
                .then((res) => {
                    const blob = new Blob([res], {
                        type: 'application/vnd.ms-excel',
                        /*你需要处理的数据类型的数据
                        doc: 'application/msword',
                		docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                		xls: 'application/vnd.ms-excel',
                		xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                		mp4: 'application/octet-stream',
                		m4a: 'application/octet-stream',
                        */
                    })
                    const fileName = ''
                    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)
 
                })
                .catch((err) => {
                /*后端返回的错误信息
					{
    					"code": 1006,
    					"data": null,
    					"message": "当前所选案件无文书信息"
					}
				但由于请求类型为blob类型时，后端的返回信息会被转义为blob二进制流，因此需要进行如下处理
				*/
                    if (err.type === 'application/json') {
                        const fileReader = new FileReader()
                        fileReader.readAsText(err, 'utf-8')
                        fileReader.onload = function () {
                            const result = fileReader.result
                            const msg = result ? JSON.parse(result).message : ''
                            that.$message.error(msg)
                        }
                        return
                    }
                })
        },

结论

   以上就是一个简单的对于blob类型的二进制流进行的处理。当然还可以在此方法的基础上进行更深层次的封装，比如使用混入进行封装引入处理，如果大家还有其他的关于二进制流的下载及报错处理 可以评论区继续交流呀！