vue基于axios封装拦截器及实现上传下载等功能_axios 拦截器如何判断是否上传文件

封装拦截器：
请求拦截：实现登陆后将所有接口都携带上token,及header中增加identify验证字段等；
响应拦截：增加错误处理代码。

文件instance.js

import axios from 'axios';
import store from '@/store';
import qs from 'qs';

const instance = axios.create({
  baseURL: process.env.VUE_APP_PREFIX_API ? process.env.VUE_APP_PREFIX_API + 'api' : 'api',
  // baseURL: process.env.VUE_APP_MAIN_API ?  process.env.VUE_APP_MAIN_API+ 'api' : 'api',
  paramsSerializer: params => qs.stringify(params, { skipNulls: true }),
});

instance.interceptors.request.use(config => {
  config.headers['csrf-token'] = store.state.token || '';
  config.headers['Content-Type'] = 'application/json';
  config.headers['Accept'] = 'application/json';
  config.headers['identify'] = 'art';

  return config;
});

instance.interceptors.response.use(
  response => response,//此处根据需求可直接返回response.data
  err => {
    const isAuthApi = err.response.config.url.includes('auth');
    // 接口错误时，直接弹框报错。
    if (!isAuthApi && err.response.data.message) {
      store.commit('setSnackbar', {
        timeout: 5000,
        color: 'error',
        text: err.response.data.message,
      });
    }
    return Promise.reject(err);
  }
);

export default instance;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

inventory.js (根据需求基于instance.js创建对应的API文件)里面可以包括获取详情，获取列表，修改，新增，上传，下载等基本API操作。

特别注意下载文件时，后端返回的如果是二进制流文件一定要将请求中的 responseType一定要设置为blob ，不然文件下载下来会损坏！！！

import instance from '@/api/instance';
const baseURL = 'brand/api';
export default {
  // 获取品牌库记录list
  getInventoryList(params) {
    return instance.get(`${baseURL}/rope/inventory/list`, { params });
  },
  
	......


  // 导出列表
  exportInventoryList(params) {
    return instance.get(`${baseURL}/rope/inventory/export`, {
      params,
      responseType: 'blob',// responseType一定要设置为blob 不然文件会损坏
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
      },
    });
  },

  // GET方式下载模板
  exportTemplate() {
    return instance.get('/xx/inventory/download/template', {
      responseType: 'blob',// responseType一定要设置为blob 不然文件会损坏
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
      },
    });
  },
  //PUT方式 下载zip包
  downloadZipFile(jobId) {
    const url = `${baseUrl}/download/${jobId}`;
    return instance({
      url,
      method: 'PUT',
      responseType: 'blob'
    })

  }
  // 导入模板
  importTemplate(file) {
    return instance.post(`${baseURL}/rope/inventory/import`, file, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

以下代码为vue文件中下载zip包代码仅供参考：

import JobsAPI from "@/api/.../inventory";// 根据路径引入对应模块的API
1

    // 下载zip文件
    downloadFile(jobId) {
      this.tableDownloadLoading = true;
      JobsAPI.downloadZipFile(jobId)
        .then((res) => {
          // console.log(res,'====res')
          const [utf8name, ext] = res.headers["content-disposition"]
            .split("=")[1]
            .split(".");
          const name = decodeURIComponent(utf8name.split("''")[1]); //解析中文名，防止乱码的问题

          const fileName = `${name}.${ext}`;
          const blob = new Blob([res.data]);

          const link = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = link;
          a.setAttribute("download", fileName);
          a.download && a.setAttribute("target", "_blank");
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          window.URL.revokeObjectURL(link);
        })
        .catch((error) => {
          snackbar({ msg: error.response.data.message, type: "error" });
        })
        .finally(() => (this.tableDownloadLoading = false));
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30