Optimize API interface

Author: zhaojing1987

config-overrides.js

@@ -1,10 +1,19 @@
-const {
-    override,
-    addWebpackExternals,
-} = require('customize-cra')
+const { override, addWebpackExternals } = require('customize-cra');
+const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = override(
-    addWebpackExternals({
-        "cockpit": "cockpit"
-    }),
-)
+    addWebpackExternals({ "cockpit": "cockpit" }),
+    (config, env) => {
+        config.devtool = false;
+        // 添加 CompressionPlugin
+        config.plugins.push(
+            new CompressionPlugin({
+                algorithm: 'gzip',
+                test: /\.(js|css)$/,
+                threshold: 10240,
+                minRatio: 0.8,
+            })
+        );
+        return config;
+    }
+);

package.json

@@ -5,10 +5,10 @@
   "homepage": ".",
   "dependencies": {
     "@apollo/client": "^3.7.9",
-    "@mui/material": "^5.12.2",
-    "@mui/icons-material": "^5.11.16",
-    "@emotion/styled": "^11.10.6",
     "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.12.2",
     "@patternfly/patternfly": "^4.224.2",
     "axios": "^1.3.4",
     "bootstrap": "5.1.3",
@@ -18,13 +18,13 @@
     "react-app-rewired": "^2.2.1",
     "react-bootstrap": "^2.1.2",
     "react-dom": "^18.2.0",
+    "react-lazyload": "^3.2.0",
+    "react-markdown": "^9.0.1",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.2",
-    "redux-saga": "^1.1.3",
     "react-scripts": "^5.0.0",
-    "sass": "^1.49.9",
-    "react-lazyload": "^3.2.0",
-    "react-markdown": "^9.0.1"
+    "redux-saga": "^1.1.3",
+    "sass": "^1.49.9"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -49,5 +49,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "compression-webpack-plugin": "^11.1.0"
   }
-}
+}

src/helpers/api/apiCore.js

@@ -4,7 +4,37 @@ import cockpit from 'cockpit';
 // content type
 axios.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
 
+// 配置缓存对象
+const configCache = {
+    apiKey: null,
+    nginxPort: null,
+    fetching: new Set()
+};
+
 const getNginxConfig = async () => {
+    // 检查缓存
+    if (configCache.nginxPort) {
+        return configCache.nginxPort;
+    }
+
+    // 防止并发重复请求
+    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();
+        });
+    }
+
+    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();
@@ -15,6 +45,8 @@ const getNginxConfig = async () => {
             throw new Error("Nginx Listen Port Not Set");
         }
 
+        // 缓存结果
+        configCache.nginxPort = listen_port;
         return listen_port;
     }
     catch (error) {
@@ -28,17 +60,45 @@ const getNginxConfig = async () => {
         else {
             throw new Error(errorText || "Get Nginx Listen Port Error");
         }
+    } finally {
+        configCache.fetching.delete('nginx');
     }
 }
 
 const getApiKey = async () => {
+    // 检查缓存
+    if (configCache.apiKey) {
+        return configCache.apiKey;
+    }
+
+    // 防止并发重复请求
+    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);
+                }
+            };
+            checkCache();
+        });
+    }
+
+    configCache.fetching.add('apikey');
+
     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");
         }
-        return api_key
+
+        // 缓存结果
+        configCache.apiKey = api_key;
+        return api_key;
     }
     catch (error) {
         const errorText = [error.problem, error.reason, error.message]
@@ -51,48 +111,152 @@ const getApiKey = async () => {
         else {
             throw new Error(errorText || "Get The Apphub's Api Key Error");
         }
+    } finally {
+        configCache.fetching.delete('apikey');
     }
 }
 
-// intercepting to capture errors
-axios.interceptors.response.use(
-    (response) => {
-        if (response.status === 200) {
-            return response.data;
-        }
-        // else if (response.status === 204) {
-        //     return null;
-        // }
-    },
-    (error) => {
-        error.message = error.response?.data?.details || error.message || "Unknown Error";
-        return Promise.reject(error);
+// 检查是否为配置错误并清除相应缓存
+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;
+        return true;
+    }
+
+    return false;
+};
 
 class APICore {
+    constructor() {
+        this.axiosInstance = null;
+    }
+
+    // 创建带缓存配置的 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();
+        }
+        return this.axiosInstance;
+    }
+
+    // 为当前实例设置拦截器
+    setupInstanceInterceptors() {
+        // 响应拦截器
+        this.axiosInstance.interceptors.response.use(
+            (response) => {
+                // 成功响应，返回数据
+                return response.status === 200 ? response.data : response;
+            },
+            (error) => {
+                // 检查并处理配置错误
+                const isConfigError = handleConfigError(error);
+                if (isConfigError) {
+                    // 标记为配置错误，调用方可以选择重试
+                    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;
+
+        // 最多重试一次
+        for (let attempt = 0; attempt < 2; attempt++) {
+            try {
+                const instance = await this.getAxiosInstance();
+
+                let response;
+                switch (method.toLowerCase()) {
+                    case 'get':
+                        response = await instance.get(url, { params });
+                        break;
+                    case 'post':
+                        response = await instance.post(url, data, { params });
+                        break;
+                    case 'put':
+                        response = await instance.put(url, data, { params });
+                        break;
+                    case 'delete':
+                        response = await instance.delete(url, { params });
+                        break;
+                    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)); // 短暂等待
+                    continue;
+                }
+
+                // 其他情况直接抛出错误
+                break;
+            }
+        }
+
+        throw lastError;
+    }
+
     get = async (url, params) => {
-        axios.defaults.headers.common['x-api-key'] = await getApiKey();
-        axios.defaults.baseURL = `${window.location.protocol}//${window.location.hostname}:` + await getNginxConfig() + "/api";
-        return axios.get(url, { params });
+        return this.requestWithRetry('get', url, null, params);
     };
 
-    post = async (url, params, data) => {
-        axios.defaults.headers.common['x-api-key'] = await getApiKey();
-        axios.defaults.baseURL = `${window.location.protocol}//${window.location.hostname}:` + await getNginxConfig() + "/api";
-        return axios.post(url, data, { params });
+    post = async (url, data, params) => {
+        return this.requestWithRetry('post', url, data, params);
     };
 
-    put = async (url, params, data) => {
-        axios.defaults.headers.common['x-api-key'] = await getApiKey();
-        axios.defaults.baseURL = `${window.location.protocol}//${window.location.hostname}:` + await getNginxConfig() + "/api";
-        return axios.put(url, data, { params });
+    put = async (url, data, params) => {
+        return this.requestWithRetry('put', url, data, params);
     };
 
     delete = async (url, params) => {
-        axios.defaults.headers.common['x-api-key'] = await getApiKey();
-        axios.defaults.baseURL = `${window.location.protocol}//${window.location.hostname}:` + await getNginxConfig() + "/api";
-        return axios.delete(url, { params });
+        return this.requestWithRetry('delete', url, null, params);
     };
 }
 

src/helpers/api/appHub.js

@@ -3,25 +3,25 @@ import { APICore } from "./apiCore";
 const api = new APICore();
 
 // 获取产品目录
-function AppCatalog(locale: String, params: any): Promise<any> {
+function AppCatalog(locale, params) {
     const baseUrl = `/apps/catalog/${locale}`;
     return api.get(`${baseUrl}`, params);
 }
 
 // 获取产品列表
-function AppAvailable(locale: String, params: any): Promise<any> {
+function AppAvailable(locale, params) {
     const baseUrl = `/apps/available/${locale}`;
     return api.get(`${baseUrl}`, params);
 }
 
 // 安装应用
-function AppInstall(params: any, body: any): Promise<any> {
+function AppInstall(params, body) {
     const baseUrl = '/apps/install';
-    return api.post(`${baseUrl}`, params, body);
+    return api.post(`${baseUrl}`, body, params);
 }
 
 // 获取设置
-function GetSettingsBySection(section: String, params: any): Promise<any> {
+function GetSettingsBySection(section, params) {
     const baseUrl = `/settings/${section}`;
     return api.get(`${baseUrl}`, params);
 }