Optimize page performance

Author: zhaojing1987

public/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.14",
+  "version": "0.3",
   "menu": {
     "appstore": {
       "label": "App Store",
@@ -8,4 +8,4 @@
     }
   },
   "content-security-policy": "default-src 'unsafe-inline' 'unsafe-eval' *;font-src * data:;style-src 'unsafe-inline' 'unsafe-eval' *;img-src * data:;connect-src  http://redhattext http://overpass-webfont  *"
-}
+}

src/helpers/api/apiCore.js

@@ -1,138 +1,100 @@
 import axios from 'axios';
 import cockpit from 'cockpit';
 
-// content type
-axios.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
+// 配置缓存
+const configCache = new Map();
+const fetchPromise = new Map();
 
-// 配置缓存对象
-const configCache = {
-    apiKey: null,
-    nginxPort: null,
-    fetching: new Set()
-};
+// 获取完整配置（一次性获取所有配置信息）
+const getFullConfig = async () => {
+    const cacheKey = 'fullConfig';
 
-const getNginxConfig = async () => {
     // 检查缓存
-    if (configCache.nginxPort) {
-        return configCache.nginxPort;
+    if (configCache.has(cacheKey)) {
+        return configCache.get(cacheKey);
     }
 
     // 防止并发重复请求
-    if (configCache.fetching.has('nginx')) {
-        return new Promise((resolve, reject) => {
-            const checkCache = () => {
-                if (configCache.nginxPort) {
-                    resolve(configCache.nginxPort);
-                } else if (!configCache.fetching.has('nginx')) {
-                    reject(new Error("Failed to get nginx config"));
-                } else {
-                    setTimeout(checkCache, 100);
-                }
-            };
-            checkCache();
-        });
+    if (fetchPromise.has(cacheKey)) {
+        return fetchPromise.get(cacheKey);
     }
 
-    configCache.fetching.add('nginx');
-
-    try {
-        var script = "docker exec -i websoft9-apphub apphub getconfig --section nginx_proxy_manager";
-        let content = (await cockpit.spawn(["/bin/bash", "-c", script], { superuser: "try" })).trim();
-        content = JSON.parse(content);
-        let listen_port = content.listen_port;
+    // 创建并缓存Promise
+    const promise = (async () => {
+        try {
+            const script = "docker exec -i websoft9-apphub apphub getconfig";
+            const result = await cockpit.spawn(["/bin/bash", "-c", script], { superuser: "try" });
+            const config = JSON.parse(result.trim());
 
-        if (!listen_port) {
-            throw new Error("Nginx Listen Port Not Set");
-        }
+            // 验证必要的配置项
+            const listenPort = config.nginx_proxy_manager?.listen_port;
+            const apiKey = config.api_key?.key;
 
-        // 缓存结果
-        configCache.nginxPort = listen_port;
-        return listen_port;
-    }
-    catch (error) {
-        const errorText = [error.problem, error.reason, error.message]
-            .filter(item => typeof item === 'string')
-            .join(' ');
-
-        if (errorText.includes("permission denied")) {
-            throw new Error("Your user does not have Docker permissions. Grant Docker permissions to this user by command: sudo usermod -aG docker <username>");
-        }
-        else {
-            throw new Error(errorText || "Get Nginx Listen Port Error");
-        }
-    } finally {
-        configCache.fetching.delete('nginx');
-    }
-}
+            if (!listenPort) {
+                throw new Error("Nginx Listen Port Not Set");
+            }
 
-const getApiKey = async () => {
-    // 检查缓存
-    if (configCache.apiKey) {
-        return configCache.apiKey;
-    }
+            if (!apiKey) {
+                throw new Error("Api Key Not Set");
+            }
 
-    // 防止并发重复请求
-    if (configCache.fetching.has('apikey')) {
-        return new Promise((resolve, reject) => {
-            const checkCache = () => {
-                if (configCache.apiKey) {
-                    resolve(configCache.apiKey);
-                } else if (!configCache.fetching.has('apikey')) {
-                    reject(new Error("Failed to get api key"));
-                } else {
-                    setTimeout(checkCache, 100);
-                }
+            const processedConfig = {
+                nginxPort: listenPort,
+                apiKey: apiKey,
+                rawConfig: config // 保留原始配置以备后用
             };
-            checkCache();
-        });
-    }
 
-    configCache.fetching.add('apikey');
+            configCache.set(cacheKey, processedConfig);
+            return processedConfig;
 
-    try {
-        var script = "docker exec -i websoft9-apphub apphub getconfig --section api_key --key key";
-        const api_key = (await cockpit.spawn(["/bin/bash", "-c", script], { superuser: "try" })).trim();
-        if (!api_key) {
-            throw new Error(" Api Key Not Set");
+        } catch (error) {
+            const errorText = [error.problem, error.reason, error.message]
+                .filter(Boolean)
+                .join(' ');
+
+            if (errorText.includes("permission denied")) {
+                throw new Error("Your user does not have Docker permissions. Grant Docker permissions to this user by command: sudo usermod -aG docker <username>");
+            }
+            throw new Error(errorText || "Get Configuration Error");
+        } finally {
+            fetchPromise.delete(cacheKey);
         }
+    })();
 
-        // 缓存结果
-        configCache.apiKey = api_key;
-        return api_key;
-    }
-    catch (error) {
-        const errorText = [error.problem, error.reason, error.message]
-            .filter(item => typeof item === 'string')
-            .join(' ');
+    fetchPromise.set(cacheKey, promise);
+    return promise;
+};
 
-        if (errorText.includes("permission denied")) {
-            throw new Error("Your user does not have Docker permissions. Grant Docker permissions to this user by command: sudo usermod -aG docker <username>");
-        }
-        else {
-            throw new Error(errorText || "Get The Apphub's Api Key Error");
-        }
-    } finally {
-        configCache.fetching.delete('apikey');
-    }
-}
+// 获取Nginx端口（向后兼容）
+const getNginxConfig = async () => {
+    const config = await getFullConfig();
+    return config.nginxPort;
+};
+
+// 获取API Key（向后兼容）
+const getApiKey = async () => {
+    const config = await getFullConfig();
+    return config.apiKey;
+};
+
+// 清除配置缓存
+const clearConfigCache = () => {
+    configCache.clear();
+    fetchPromise.clear();
+    console.log('[ApiCore] Configuration cache cleared');
+};
 
 // 检查是否为配置错误并清除相应缓存
 const handleConfigError = (error) => {
     const status = error.response?.status;
     const details = error.response?.data?.details;
 
-    // API Key 无效 - 后端返回 400 + "Invalid API Key"
-    if (status === 400 && details === "Invalid API Key") {
-        console.warn('[Config Error] Invalid API Key detected, clearing cache');
-        configCache.apiKey = null;
-        return true;
-    }
-
-    // Nginx 端口/连接错误
-    if (status === 404 || status === 502 || status === 503 ||
-        error.code === 'ECONNREFUSED' || error.code === 'ETIMEDOUT') {
-        console.warn('[Config Error] Nginx connection error detected, clearing cache');
-        configCache.nginxPort = null;
+    // API Key 无效或连接错误
+    if ((status === 400 && details === "Invalid API Key") ||
+        [404, 502, 503].includes(status) ||
+        ['ECONNREFUSED', 'ETIMEDOUT'].includes(error.code)) {
+        console.warn('[Config Error] Configuration error detected, clearing cache');
+        clearConfigCache();
         return true;
     }
 
@@ -144,120 +106,87 @@ class APICore {
         this.axiosInstance = null;
     }
 
-    // 创建带缓存配置的 axios 实例
+    // 获取或创建配置好的axios实例
     async getAxiosInstance() {
         if (!this.axiosInstance) {
-            // 并行获取配置，避免串行等待
-            const [apiKey, nginxPort] = await Promise.all([
-                getApiKey(),
-                getNginxConfig()
-            ]);
-
-            this.axiosInstance = axios.create({
-                baseURL: `${window.location.protocol}//${window.location.hostname}:${nginxPort}/api`,
-                headers: {
-                    'Content-Type': 'application/json; charset=utf-8',
-                    'x-api-key': apiKey
-                },
-                timeout: 30000
-            });
-
-            // 只为这个实例设置拦截器，不影响全局
-            this.setupInstanceInterceptors();
+            await this.initializeAxiosInstance();
         }
         return this.axiosInstance;
     }
 
-    // 为当前实例设置拦截器
-    setupInstanceInterceptors() {
-        // 响应拦截器
-        this.axiosInstance.interceptors.response.use(
-            (response) => {
-                // 成功响应，返回数据
-                return response.status === 200 ? response.data : response;
+    // 初始化axios实例（优化：一次获取所有配置）
+    async initializeAxiosInstance() {
+        // 一次性获取所有配置
+        const config = await getFullConfig();
+
+        this.axiosInstance = axios.create({
+            baseURL: `${window.location.protocol}//${window.location.hostname}:${config.nginxPort}/api`,
+            headers: {
+                'Content-Type': 'application/json; charset=utf-8',
+                'x-api-key': config.apiKey
             },
-            (error) => {
-                // 检查并处理配置错误
-                const isConfigError = handleConfigError(error);
-                if (isConfigError) {
-                    // 标记为配置错误，调用方可以选择重试
+            timeout: 30000
+        });
+
+        this.setupInterceptors();
+    }
+
+    // 设置拦截器
+    setupInterceptors() {
+        this.axiosInstance.interceptors.response.use(
+            response => response.status === 200 ? response.data : response,
+            error => {
+                if (handleConfigError(error)) {
                     error.configError = true;
                 }
-
                 error.message = error.response?.data?.details || error.message || "Unknown Error";
                 return Promise.reject(error);
             }
         );
     }
 
-    // 重置实例（配置错误时使用）
+    // 重置实例
     resetInstance() {
         this.axiosInstance = null;
     }
 
-    // 带重试的请求方法
-    async requestWithRetry(method, url, data = null, params = null) {
-        let lastError;
-
-        // 最多重试一次
+    // 通用请求方法，支持重试
+    async request(method, url, data = null, params = null) {
         for (let attempt = 0; attempt < 2; attempt++) {
             try {
                 const instance = await this.getAxiosInstance();
+                const config = { params };
 
-                let response;
                 switch (method.toLowerCase()) {
                     case 'get':
-                        response = await instance.get(url, { params });
-                        break;
+                        return await instance.get(url, config);
                     case 'post':
-                        response = await instance.post(url, data, { params });
-                        break;
+                        return await instance.post(url, data, config);
                     case 'put':
-                        response = await instance.put(url, data, { params });
-                        break;
+                        return await instance.put(url, data, config);
                     case 'delete':
-                        response = await instance.delete(url, { params });
-                        break;
+                        return await instance.delete(url, config);
                     default:
                         throw new Error(`Unsupported method: ${method}`);
                 }
-
-                // 直接返回拦截器处理后的结果
-                return response;
             } catch (error) {
-                lastError = error;
-
-                // 如果是配置错误且是第一次尝试，重置实例并重试
+                // 配置错误且是第一次尝试，重置并重试
                 if (error.configError && attempt === 0) {
                     console.info(`[API Retry] Config error detected, resetting instance and retrying...`);
                     this.resetInstance();
-                    await new Promise(resolve => setTimeout(resolve, 200)); // 短暂等待
+                    await new Promise(resolve => setTimeout(resolve, 200));
                     continue;
                 }
-
-                // 其他情况直接抛出错误
-                break;
+                throw error;
             }
         }
-
-        throw lastError;
     }
 
-    get = async (url, params) => {
-        return this.requestWithRetry('get', url, null, params);
-    };
-
-    post = async (url, data, params) => {
-        return this.requestWithRetry('post', url, data, params);
-    };
-
-    put = async (url, data, params) => {
-        return this.requestWithRetry('put', url, data, params);
-    };
-
-    delete = async (url, params) => {
-        return this.requestWithRetry('delete', url, null, params);
-    };
+    // HTTP方法的简化封装
+    get = (url, params) => this.request('get', url, null, params);
+    post = (url, data, params) => this.request('post', url, data, params);
+    put = (url, data, params) => this.request('put', url, data, params);
+    delete = (url, params) => this.request('delete', url, null, params);
 }
 
-export { APICore, getNginxConfig, getApiKey };
+export { APICore, getNginxConfig, getApiKey, getFullConfig };