/** * 全站http配置 * axios参数说明 * isSerialize是否开启form表单提交 * isToken是否需要token */ import axios from 'axios'; import store from '@/store/'; // Vuex状态管理 import router from '@/router/'; // Vue路由 import { serialize } from 'utils/util'; // 序列化工具函数,通常用于处理请求参数 import { getToken } from 'utils/auth'; // 用于获取存储的Token import { isURL } from 'utils/validate'; // 验证字符串是否为URL的函数 import { ElMessage } from 'element-plus'; // Element-Plus中的消息提示组件 import website from '@/config/website'; // 站点配置文件,可以配置一些通用信息如clientId、clientSecret import NProgress from 'nprogress'; // 页面顶部进度条 import 'nprogress/nprogress.css'; // 进度条样式 import { Base64 } from 'js-base64'; // Base64编码工具 import { baseUrl } from '@/config/env'; // API基础URL import crypto from '@/utils/crypto'; // 加密工具,可能用于加密Token等 import {ref} from 'vue'; let msg = ref(''); // 错误信息 // 存储待取消的HTTP请求的键值对,用于取消重复的请求 const pendingRequests = new Map(); // 配置axios默认值 axios.defaults.timeout = 10 * 60000; // 设置超时时间 axios.defaults.validateStatus = status => status >= 200 && status <= 500; // 定义对于给定的HTTP响应状态码是resolve(成功)还是reject(失败) axios.defaults.withCredentials = true; // 表示跨域请求时是否需要使用凭证 // NProgress配置:禁用进度环 NProgress.configure({ showSpinner: false }); // 生成请求的键值,用于跟踪和取消重复的请求 function generateReqKey(config) { const { method, url, params, data } = config; return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&'); } // 添加请求到pendingRequests对象,并创建取消令牌 function addPendingRequest(config) { const requestKey = generateReqKey(config); config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => { if (!pendingRequests.has(requestKey)) { pendingRequests.set(requestKey, cancel); } }); } // 从pendingRequests对象中移除请求,并调用取消操作 function removePendingRequest(config) { const requestKey = generateReqKey(config); if (pendingRequests.has(requestKey)) { const cancel = pendingRequests.get(requestKey); cancel(requestKey); pendingRequests.delete(requestKey); } } //axios请求拦截器 axios.interceptors.request.use( config => { // 检查 config.url 是否以 http 开头 // console.log(config,'config'); // 在请求开始前,对之前的请求做检查取消操作 removePendingRequest(config); // 将当前请求添加到pendingRequests对象中 addPendingRequest(config); // 显示进度条 NProgress.start(); // // 检查URL是否完整,如果不完整或不是URL,则添加baseUrl前缀 if (!isURL(config.url) && !config.url.startsWith(baseUrl)) { config.url = baseUrl + config.url; } // 检查URL是否完整,如果不完整或不是URL,并且不以 /imgapi 开头,则添加 baseUrl 前缀 // if (!isURL(config.url) && !config.url.startsWith(baseUrl) && !config.url.startsWith('/imgapi')) { // config.url = baseUrl + config.url; // } // 添加授权头部(如果请求中没有设置authorization属性为false) const authorization = config.authorization === false; if (!authorization) { config.headers['Authorization'] = `Basic ${Base64.encode( `${website.clientId}:${website.clientSecret}` )}`; } // 如果请求需要token,则在请求头中添加token(除非明确声明不需token) const meta = config.meta || {}; const isToken = meta.isToken === false; const cryptoToken = config.cryptoToken === true; const token = getToken(); if (token && !isToken) { // 如果配置了cryptoToken,则使用加密的Token,否则使用bearer token config.headers[website.tokenHeader] = cryptoToken ? 'crypto ' + crypto.encrypt(token) : 'bearer ' + token; } // 如果配置了text为true,设置文本请求头部 if (config.text === true) { config.headers['Content-Type'] = 'text/plain'; } // 序列化POST请求的数据(如果请求配置了isSerialize) if (config.method === 'post' && meta.isSerialize === true) { config.data = serialize(config.data); } return config; }, error => { // 如果请求失败则结束进度条 NProgress.done(); return Promise.reject(error); } ); //axios响应拦截器 axios.interceptors.response.use( res => { // 隐藏进度条 NProgress.done(); // 移除仍在pendingRequests中的请求 removePendingRequest(res.config); // 获取response中的状态码,优先获取自定义的code,若无则获取HTTP状态码 const status = res.data.code || res.status; // 获取状态码白名单内的状态,这些状态不会被默认处理,而是将控制权交给具体请求 const statusWhiteList = website.statusWhiteList || []; // 取错误消息 const message = res.data.msg || res.data.error_description || '未知错误'; // 如果状态码在白名单中,则直接返回Promise的reject状态 if (statusWhiteList.includes(status)) return Promise.reject(res); // 如果状态码为401,则表示用户未认证,需跳转到登录页 if (status === 401) store.dispatch('FedLogOut').then(() => router.push({ path: '/login' })); // 如果response的状态码不是200,则显示消息提示,并返回Promise的reject状态 if (status !== 200 && status !== '0' && status !== '1') { if(!msg.value){ ElMessage({ message: message, type: 'error', }); } setTimeout(() => { msg.value = ''; }, 50); msg.value=message return Promise.reject(new Error(message)); } // 正常状态返回responseData return res; }, error => { // 隐藏进度条 NProgress.done(); // 移除请求(防止后续的请求无法执行) removePendingRequest(error.config || {}); // 如果是取消请求的错误,则不弹出消息提示 if (axios.isCancel(error)) { console.log('Request canceled', error.message); } else { // 正常请求错误,显示提示消息 ElMessage({ message: error.message, type: 'error', }); } return Promise.reject(error); } ); // 导出axios实例 export default axios;