Merge branch 'dev' of http://47.108.105.48:3000/java_project/logpm_page into dev

src/axios.js

@@ -1,92 +1,135 @@
 /**
  * 全站http配置
- *
  * axios参数说明
  * isSerialize是否开启form表单提交
  * isToken是否需要token
  */
 import axios from 'axios';
-import store from '@/store/';
-import router from '@/router/';
-import { serialize } from 'utils/util';
-import { getToken } from 'utils/auth';
-import { isURL } from 'utils/validate';
-import { ElMessage } from 'element-plus';
-import website from '@/config/website';
-import NProgress from 'nprogress'; // progress bar
-import 'nprogress/nprogress.css'; // progress bar style
-import { Base64 } from 'js-base64';
-import { baseUrl } from '@/config/env';
-import crypto from '@/utils/crypto';
+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等
 
-axios.defaults.timeout = 10 * 60000;
-//返回其他状态吗
-axios.defaults.validateStatus = function (status) {
-  return status >= 200 && status <= 500; // 默认的
-};
-//跨域请求，允许保存cookie
-axios.defaults.withCredentials = true;
-// NProgress Configuration
-NProgress.configure({
-  showSpinner: false,
-});
-//HTTPrequest拦截
+// 存储待取消的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 => {
-    // start progress bar
+    // 在请求开始前，对之前的请求做检查取消操作
+    removePendingRequest(config);
+    // 将当前请求添加到pendingRequests对象中
+    addPendingRequest(config);
+    // 显示进度条
     NProgress.start();
-    //地址为已经配置状态则不添加前缀
+    
+    // 检查URL是否完整，如果不完整或不是URL，则添加baseUrl前缀
     if (!isURL(config.url) && !config.url.startsWith(baseUrl)) {
       config.url = baseUrl + config.url;
     }
-    //headers判断是否需要
+    
+    // 添加授权头部（如果请求中没有设置authorization属性为false）
     const authorization = config.authorization === false;
     if (!authorization) {
       config.headers['Authorization'] = `Basic ${Base64.encode(
         `${website.clientId}:${website.clientSecret}`
       )}`;
     }
-    //headers判断请求是否携带token
+    
+    // 如果请求需要token，则在请求头中添加token（除非明确声明不需token）
     const meta = config.meta || {};
     const isToken = meta.isToken === false;
-    //headers传递token是否加密
     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;
     }
-    //headers中配置text请求
+
+    // 如果配置了text为true，设置文本请求头部
     if (config.text === true) {
       config.headers['Content-Type'] = 'text/plain';
     }
-    //headers中配置serialize为true开启序列化
+    
+    // 序列化POST请求的数据（如果请求配置了isSerialize）
     if (config.method === 'post' && meta.isSerialize === true) {
       config.data = serialize(config.data);
     }
     return config;
   },
   error => {
+    // 如果请求失败则结束进度条
+    NProgress.done();
     return Promise.reject(error);
   }
 );
-//HTTPresponse拦截
+
+//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 || '未知错误';
-    //如果在白名单里则自行catch逻辑处理
+    
+    // 如果状态码在白名单中，则直接返回Promise的reject状态
     if (statusWhiteList.includes(status)) return Promise.reject(res);
-    //如果是401则跳转到登录页面
+    
+    // 如果状态码为401，则表示用户未认证，需跳转到登录页
     if (status === 401) store.dispatch('FedLogOut').then(() => router.push({ path: '/login' }));
-    // 如果请求为非200否者默认统一处理
-    // TOKEN过期
-    if (status === 401) {
-      console.log('当前无权限');
-    }
+    
+    // 如果response的状态码不是200，则显示消息提示，并返回Promise的reject状态
     if (status !== 200) {
       ElMessage({
         message: message,
@@ -94,12 +137,29 @@ axios.interceptors.response.use(
       });
       return Promise.reject(new Error(message));
     }
+    
+    // 正常状态返回responseData
     return res;
   },
   error => {
+    // 隐藏进度条
     NProgress.done();
-    return Promise.reject(new Error(error));
+    // 移除请求（防止后续的请求无法执行）
+    removePendingRequest(error.config || {});
+
+    // 如果是取消请求的错误，则不弹出消息提示
+    if (axios.isCancel(error)) {
+      console.log('Request canceled', error.message);
+    } else {
+      // 正常请求错误，显示提示消息
+      ElMessage({
+        message: error.message,
+        type: 'error',
+      });
+    }
+    return Promise.reject(error);
   }
 );
 
-export default axios;
+// 导出axios实例
+export default axios;