封装拦截器:
请求拦截:实现登陆后将所有接口都携带上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;
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' },
});
},
};
以下代码为vue文件中下载zip包代码仅供参考:
import JobsAPI from "@/api/.../inventory";// 根据路径引入对应模块的API
// 下载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));
},