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

简介

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

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

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

1. import axios from 'axios';
2. const downloadFile = async (url, params) => {
3.   try {
4.     const response = await axios({
5.       method: 'get',
6.       url: url,
7.       params: params,
8.       responseType: 'blob', // 设置响应类型为blob
9.     });
10.     // 创建一个Blob对象
11.     const blob = new Blob([response.data], { type: response.headers['content-type'] });
12.     const downloadUrl = window.URL.createObjectURL(blob);
13.     const link = document.createElement('a');
14.     link.href = downloadUrl;
15.     link.setAttribute('download', 'filename.ext'); // 设置下载文件名
16.     document.body.appendChild(link);
17.     link.click();
18.     link.remove();
19.   } catch (error) {
20.     handleError(error);
21.   }
22. };
24. const handleError = (error) => {
25.   // 错误处理逻辑
26. };
27. export default downloadFile;

复制代码

封装成功与错误处理逻辑

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

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

1. import axios from 'axios'
2. // HTTPresponse拦截
3. axios.interceptors.response.use(
4.     async (bigData) => {
5.         const { status, statusText, data } = bigData
6.         if (status === 200) {
7.                  if (bigData.headers['content-type'].indexOf('application/json') === -1 ) {
8.                 // 针对下载接口做特殊处理，根据content-type 字段来
9.                 return Promise.resolve(data)
10.             }
11.                 if (data.code === 1000) {
12.                     return Promise.resolve(data.data)
13.                 } else {
14.                     return Promise.reject(data)
15.                 }
16.             }
17.         } else {
18.         }
19.     },
20.     (error) => {
21.     },
22. )

复制代码

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

1. import request from '@/axios'//axios.js所在的目录
2. export const export = (data) =>
3.     request({
4.         url: url,
5.         method: 'post',
6.         data,
7.         responseType: 'blob',
8.     })

复制代码

• 详细页面的导出接口
  

1. import { export } from '@request.js'
2. exportExcel() {
3.             export(params)
4.                 .then((res) => {
5.                     const blob = new Blob([res], {
6.                         type: 'application/vnd.ms-excel',
7.                         /*你需要处理的数据类型的数据
8.                         doc: 'application/msword',
9.                                 docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
10.                                 xls: 'application/vnd.ms-excel',
11.                                 xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
12.                                 mp4: 'application/octet-stream',
13.                                 m4a: 'application/octet-stream',
14.                         */
15.                     })
16.                     const fileName = ''
17.                     const elink = document.createElement('a')
18.                     elink.download = fileName
19.                     elink.style.display = 'none'
20.                     elink.href = URL.createObjectURL(blob)
21.                     document.body.appendChild(elink)
22.                     elink.click()
23.                     URL.revokeObjectURL(elink.href) // 释放URL 对象
24.                     document.body.removeChild(elink)
26.                 })
27.                 .catch((err) => {
28.                 /*后端返回的错误信息
29.                                         {
30.                                             "code": 1006,
31.                                             "data": null,
32.                                             "message": "当前所选案件无文书信息"
33.                                         }
34.                                 但由于请求类型为blob类型时，后端的返回信息会被转义为blob二进制流，因此需要进行如下处理
35.                                 */
36.                     if (err.type === 'application/json') {
37.                         const fileReader = new FileReader()
38.                         fileReader.readAsText(err, 'utf-8')
39.                         fileReader.onload = function () {
40.                             const result = fileReader.result
41.                             const msg = result ? JSON.parse(result).message : ''
42.                             that.$message.error(msg)
43.                         }
44.                         return
45.                     }
46.                 })
47.         },

复制代码

结论

   以上就是一个简单的对于blob类型的二进制流进行的处理。固然还可以在此方法的底子上进行更深层次的封装，比如利用混入进行封装引入处理，假如各人另有其他的关于二进制流的下载及报错处理 可以评论区继承交流呀！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。