li.shaoyi 2 yıl önce
ebeveyn
işleme
cebd9e6cde

+ 113 - 0
package-lock.json

@@ -44,6 +44,7 @@
         "@vue/cli-plugin-typescript": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "@vue/eslint-config-typescript": "^9.1.0",
+        "compression-webpack-plugin": "^10.0.0",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
         "less": "^4.0.0",
@@ -4683,6 +4684,67 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/compression-webpack-plugin": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/compression-webpack-plugin/-/compression-webpack-plugin-10.0.0.tgz",
+      "integrity": "sha512-wLXLIBwpul/ALcm7Aj+69X0pYT3BYt6DdPn3qrgBIh9YejV9Bju9ShhlAsjujLyWMo6SAweFIWaUoFmXZNuNrg==",
+      "dev": true,
+      "dependencies": {
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/compression-webpack-plugin/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "node_modules/compression-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/compression-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/compression-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
     "node_modules/compression/node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -16338,6 +16400,57 @@
         }
       }
     },
+    "compression-webpack-plugin": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/compression-webpack-plugin/-/compression-webpack-plugin-10.0.0.tgz",
+      "integrity": "sha512-wLXLIBwpul/ALcm7Aj+69X0pYT3BYt6DdPn3qrgBIh9YejV9Bju9ShhlAsjujLyWMo6SAweFIWaUoFmXZNuNrg==",
+      "dev": true,
+      "requires": {
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.12.0",
+          "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        }
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",

+ 1 - 0
package.json

@@ -46,6 +46,7 @@
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
+    "compression-webpack-plugin": "^10.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "less": "^4.0.0",

+ 48 - 1
src/packages/mobile/index.html

@@ -10,6 +10,47 @@
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>
+  <style>
+    @keyframes app-load {
+      0% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0;
+      }
+    }
+
+    .app-load {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 5px;
+      height: 100vh;
+    }
+
+    .app-load span {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #ccc;
+      opacity: 0;
+      animation: app-load 600ms ease infinite;
+    }
+
+    .app-load span:nth-child(1) {
+      animation-delay: 100ms;
+    }
+
+    .app-load span:nth-child(2) {
+      animation-delay: 200ms;
+    }
+
+    .app-load span:nth-child(3) {
+      animation-delay: 300ms;
+    }
+  </style>
 </head>
 
 <body>
@@ -17,7 +58,13 @@
     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
         Please enable it to continue.</strong>
   </noscript>
-  <div id="app" class="app"></div>
+  <div id="app" class="app">
+    <div class="app-load">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
   <!-- built files will be auto injected -->
 </body>
 

+ 2 - 2
src/packages/pc/views/boot/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="boot" v-loading="logining"></div>
+  <div class="boot" v-loading="true"></div>
 </template>
 
 <script lang="ts" setup>
 import { useRoute, useRouter } from 'vue-router'
 import { useLogin } from '@/business/login'
 
-const { logining, initBaseData } = useLogin()
+const { initBaseData } = useLogin()
 const route = useRoute()
 const router = useRouter()
 

+ 1 - 1
src/services/api/news/index.ts

@@ -11,6 +11,6 @@ export function querySiteColumnDetail(params: HttpParams<{ req: Model.SiteColumn
 /**
  * 查询资讯栏目配置
  */
- export function querySiteColumnConfig(params: HttpParams<{ req: Model.SiteColumnConfigReq, rsp: Model.SiteColumnConfigRsp[] }>) {
+export function querySiteColumnConfig(params: HttpParams<{ req: Model.SiteColumnConfigReq, rsp: Model.SiteColumnConfigRsp[] }>) {
     return httpRequest('/WrTrade2/QuerySiteColumnConfig', 'get', params);
 }

+ 58 - 63
src/services/http/index.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosRequestConfig, Method, AxiosInstance } from 'axios'
+import axios, { AxiosRequestConfig, Method } from 'axios'
 //import qs from 'qs'
 //import cryptojs from 'crypto-js'
 //import { addPending, removePending } from './pending'
@@ -7,65 +7,64 @@ import { HttpParams, CommonParams, HttpResponse, Payload, ResultCode } from './i
 import service from '@/services'
 
 const httpService = new (class {
-    private axiosInstance?: AxiosInstance
+    private axiosInstance = axios.create({
+        timeout: 30000,
+    })
 
     constructor() {
-        this.init()
-    }
-
-    private init = async () => {
-        if (!this.axiosInstance) {
-            const config = await service.onReady()
-            this.axiosInstance = axios.create({
-                timeout: 30000,
-                baseURL: config.goCommonSearchUrl,
-            })
-            // 请求拦截器
-            this.axiosInstance.interceptors.request.use(
-                (config) => {
-                    //removePending(config) //在请求开始前,对之前的请求做检查取消操作
-                    //addPending(config) //将当前请求添加到列表中
-                    //请求头签名
-                    const sign = {
-                        token: loginStore.getters.token,
-                        signsecret: 'qz7qWOMXKTMT5JlDs5w4NTPwWeR3xhF1v6wqbZ9cExmP6cc3spvNAp1wJJ1SqRI5',
-                        timestamp: new Date().getTime(),
-                    }
-                    //设置请求头
-                    config.headers = {
-                        Authorization: sign.token,
-                        //Signid: 'eecd3f37625f4501b88e9f0fa14b4b51',
-                        //Sign: cryptojs.SHA256(qs.stringify(sign)).toString(),
-                        //Timestamp: sign.timestamp.toString(),
-                    }
-                    return config
-                },
-                (err) => {
-                    //此处异常触发条件不明
-                    console.error(err)
-                    return Promise.reject('网络异常,请稍后再试')
+        // 请求拦截器
+        this.axiosInstance.interceptors.request.use(
+            (config) => {
+                //addPending(config) //将当前请求添加到列表中
+                //请求头签名
+                const sign = {
+                    token: loginStore.getters.token,
+                    signsecret: 'qz7qWOMXKTMT5JlDs5w4NTPwWeR3xhF1v6wqbZ9cExmP6cc3spvNAp1wJJ1SqRI5',
+                    timestamp: new Date().getTime(),
+                }
+                //设置请求头
+                config.headers = {
+                    Authorization: sign.token,
+                    //Signid: 'eecd3f37625f4501b88e9f0fa14b4b51',
+                    //Sign: cryptojs.SHA256(qs.stringify(sign)).toString(),
+                    //Timestamp: sign.timestamp.toString(),
                 }
-            )
-            // 响应拦截器
-            this.axiosInstance.interceptors.response.use(
-                (res) => {
-                    //removePending(res) //在请求结束后,移除本次请求
-                    return res
-                },
-                (err) => {
-                    const { msg, message } = err.response?.data ?? {}
-                    if (!axios.isCancel(err)) {
-                        console.error(err)
+                return config
+            },
+            (err) => {
+                console.error(err)
+                return Promise.reject('出现错误,请稍后再试')
+            }
+        )
+        // 响应拦截器
+        this.axiosInstance.interceptors.response.use(
+            (res) => {
+                //removePending(res) //在请求结束后,移除本次请求
+                return res
+            },
+            (err) => {
+                if (err.message === 'Network Error') {
+                    return Promise.reject('无网络连接,请检查网络')
+                }
+                if (err.response) {
+                    const { msg, message } = err.response.data ?? {}
+                    switch (err.response.status) {
+                        case 408: {
+                            return Promise.reject('请求超时,请稍后再试')
+                        }
+                        default: {
+                            return Promise.reject(msg || message)
+                        }
                     }
-                    // 异常提示待优化
-                    return Promise.reject(msg || message)
                 }
-            )
-        }
-        return Promise.resolve(this.axiosInstance)
+                return Promise.reject('出现错误,请稍后再试')
+            }
+        )
     }
 
     private request = async (url: string, method: Method, payload?: unknown) => {
+        const config = await service.onReady()
+        this.axiosInstance.defaults.baseURL = config.goCommonSearchUrl
         const requestConfig: AxiosRequestConfig = {
             url,
             method,
@@ -79,17 +78,17 @@ const httpService = new (class {
         } else {
             requestConfig.url = url + (payload ?? '')
         }
-        const instance = await this.init()
-        return instance(requestConfig)
+        return this.axiosInstance(requestConfig)
     }
 
     commonRequest = async <T extends Payload>(url: string, method: Method, params: CommonParams<T>, errMsg?: string) => {
         const { data, success, fail, complete } = params
-        await this.request(url, method, data).then((res) => {
+        return await this.request(url, method, data).then((res) => {
             const data = res.data as T['rsp']
             success && success(data)
+            return Promise.resolve(data)
         }).catch((err) => {
-            const msg = err ?? (errMsg ? '请求失败: ' + errMsg : '服务异常,请稍后重试')
+            const msg = err ?? (errMsg ? '请求失败: ' + errMsg : '请求失败,请稍后重试')
             fail && fail(msg)
             return Promise.reject(msg)
         }).finally(() => {
@@ -99,24 +98,20 @@ const httpService = new (class {
 
     httpRequest = async <T extends Payload>(url: string, method: Method, params: HttpParams<T>, errMsg?: string) => {
         const { data, success, fail, complete } = params
-        await this.request(url, method, data).then((res) => {
+        return await this.request(url, method, data).then((res) => {
             const data = res.data as HttpResponse<T['rsp']>
             switch (data.code) {
                 case ResultCode.InvalidToken:
-                    //退出登录
-                    //store.dispatch("user/logout", () => {
-                    //    window.location.reload()
-                    //})
                     return Promise.reject('令牌无效')
                 case ResultCode.Success:
                     success && success(data)
-                    return Promise.resolve()
+                    return Promise.resolve(data)
                 default:
                     fail && fail(data.msg)
                     return Promise.reject(data.msg)
             }
         }).catch((err) => {
-            const msg = err ?? (errMsg ? '请求失败: ' + errMsg : '服务异常,请稍后重试')
+            const msg = err ?? (errMsg ? '请求失败: ' + errMsg : '请求失败,请稍后重试')
             fail && fail(msg)
             return Promise.reject(msg)
         }).finally(() => {

+ 134 - 0
src/services/http/index@next.ts

@@ -0,0 +1,134 @@
+import { shallowRef, onUnmounted } from 'vue'
+import axios, { AxiosRequestConfig, Method } from 'axios'
+//import qs from 'qs'
+//import cryptojs from 'crypto-js'
+//import { addPending, removePending } from './pending'
+import { loginStore } from '@/stores'
+import { useDataTable } from '@/hooks/datatable'
+import service from '@/services'
+
+const httpService = new (class {
+    private axiosInstance = axios.create({
+        timeout: 30000,
+    })
+
+    constructor() {
+        // 请求拦截器
+        this.axiosInstance.interceptors.request.use(
+            (config) => {
+                //addPending(config) //将当前请求添加到列表中
+                //请求头签名
+                const sign = {
+                    token: loginStore.getters.token,
+                    signsecret: 'qz7qWOMXKTMT5JlDs5w4NTPwWeR3xhF1v6wqbZ9cExmP6cc3spvNAp1wJJ1SqRI5',
+                    timestamp: new Date().getTime(),
+                }
+                //设置请求头
+                config.headers = {
+                    Authorization: sign.token,
+                    //Signid: 'eecd3f37625f4501b88e9f0fa14b4b51',
+                    //Sign: cryptojs.SHA256(qs.stringify(sign)).toString(),
+                    //Timestamp: sign.timestamp.toString(),
+                }
+                return config
+            },
+            (err) => {
+                console.error(err)
+                return Promise.reject('出现错误,请稍后再试')
+            }
+        )
+        // 响应拦截器
+        this.axiosInstance.interceptors.response.use(
+            (res) => {
+                //removePending(res) //在请求结束后,移除本次请求
+                return res
+            },
+            (err) => {
+                if (err.message === 'Network Error') {
+                    return Promise.reject('无网络连接,请检查网络')
+                }
+                if (err.response) {
+                    const { msg, message } = err.response.data ?? {}
+                    switch (err.response.status) {
+                        case 408: {
+                            return Promise.reject('请求超时,请稍后再试')
+                        }
+                        default: {
+                            return Promise.reject(msg || message)
+                        }
+                    }
+                }
+                return Promise.reject('出现错误,请稍后再试')
+            }
+        )
+    }
+
+    httpRequest = async <T>(url: string, method: Method, payload?: T) => {
+        const config = await service.onReady()
+        this.axiosInstance.defaults.baseURL = config.goCommonSearchUrl
+        const requestConfig: AxiosRequestConfig = {
+            url,
+            method,
+        }
+        if (payload instanceof Object) {
+            if (['post', 'POST', 'put', 'PUT', 'patch', 'PATCH'].includes(method)) {
+                requestConfig.data = payload
+            } else {
+                requestConfig.params = payload
+            }
+        } else {
+            requestConfig.url = url + (payload ?? '')
+        }
+        return this.axiosInstance(requestConfig)
+    }
+})
+
+export const { httpRequest } = httpService
+
+
+function queryLoginId(params: string) {
+    return httpRequest('/User/GetLoginID', 'get', params)
+}
+
+function useRequest<Rsp, Req>(aa: (params: Req) => Promise<Rsp>, options: { params: Req, success?: (res: Rsp) => void }) {
+    const { dataList, total, pageIndex, pageSize, pageCount } = useDataTable<Rsp>()
+    const loading = shallowRef(false)
+
+    const run = (payload?: Partial<Req>) => {
+        aa({ ...options.params, ...payload }).then((res) => {
+            options.success && options.success(res)
+        })
+    }
+
+    const cancel = () => {
+        console.log('取消请求')
+    }
+
+    onUnmounted(() => {
+        cancel()
+    })
+
+    return {
+        loading,
+        dataList,
+        total,
+        pageIndex,
+        pageSize,
+        pageCount,
+        run,
+        cancel,
+    }
+}
+
+const { run } = useRequest(queryLoginId, {
+    params: '12'
+})
+
+/**
+ * 获取服务配置地址
+ * @param key 
+ * @returns 
+ */
+export function getServiceUrl(key: keyof typeof service.config) {
+    return service.config[key]
+}

+ 11 - 10
src/services/http/pending/index.ts

@@ -19,13 +19,14 @@ const getRequestKey = (config: AxiosRequestConfig) => {
  * 添加请求
  */
 export function addPending(config: AxiosRequestConfig) {
-    const url = getRequestKey(config)
+    removePending(config) //在请求开始前,对之前的请求做检查取消操作
+    const key = getRequestKey(config)
     config.cancelToken =
         config.cancelToken ||
         new axios.CancelToken((cancel) => {
-            if (!pending.has(url)) {
+            if (!pending.has(key)) {
                 //如果列表中不存在当前请求,则添加进去
-                pending.set(url, cancel)
+                pending.set(key, cancel)
             }
         })
 }
@@ -34,12 +35,12 @@ export function addPending(config: AxiosRequestConfig) {
  * 移除请求
  */
 export function removePending(config: AxiosRequestConfig) {
-    const url = getRequestKey(config)
-    if (pending.has(url)) {
+    const key = getRequestKey(config)
+    if (pending.has(key)) {
         //如果在列表中存在当前请求,需要取消当前请求,并且移除
-        const cancel = pending.get(url)
-        cancel(url)
-        pending.delete(url)
+        const cancel = pending.get(key)
+        cancel(key)
+        pending.delete(key)
     }
 }
 
@@ -47,8 +48,8 @@ export function removePending(config: AxiosRequestConfig) {
  * 清空等待中的请求(在路由跳转时调用)
  */
 export function clearPending() {
-    for (const [url, cancel] of pending) {
-        cancel(url)
+    for (const [key, cancel] of pending) {
+        cancel(key)
     }
     pending.clear()
 }

+ 5 - 16
src/services/index.ts

@@ -45,34 +45,23 @@ export default new (class {
      */
     private retryCount = 0
 
-    /** 
-     * 重试间隔秒数,默认5秒
-     */
-    private defaultRetryInterval = 5 * 1000
-
-    /**
-     * 重试间隔时长
-     */
-    private retryInterval = this.defaultRetryInterval
-
     /**
      * 失败时重新尝试初始化,直到成功为止
      * @param msg 
      */
     private tryinit = (msg: string) => {
-        console.error(msg)
-        this.retryCount++
         return new Promise<typeof this.config>((resolve, reject) => {
             if (this.retryCount >= 5) {
                 this.retryCount = 0
-                this.retryInterval = this.defaultRetryInterval
                 this.isPending = false
-                reject('服务初始化失败')
+                reject(msg)
             } else {
+                this.retryCount++
+                // 自动计算每次重试的延时,重试次数越多,延时越大
+                const delay = this.retryCount * 5000
                 setTimeout(() => {
-                    this.retryInterval += this.defaultRetryInterval
                     resolve(this.init())
-                }, this.retryInterval)
+                }, delay)
             }
         })
     }

+ 3 - 3
src/services/socket/trade/index.ts

@@ -75,12 +75,12 @@ function tradeServerMiddleware<Req, Rsp>(reqKey: keyof typeof FunCode, rspKey: k
 export async function tradeServerRequest<Req, Rsp>(reqKey: keyof typeof FunCode, rspKey: keyof typeof FunCode, params: TradeParams<Req, Rsp & TradeResponse>, marketId?: number) {
     const { success, fail, complete } = params;
 
-    await tradeServerMiddleware(reqKey, rspKey, params, marketId).then((res) => {
+    return await tradeServerMiddleware(reqKey, rspKey, params, marketId).then((res) => {
         const { RetCode, Status, RetDesc } = { ...res };
         switch (RetCode) {
             case 0: {
                 success && success(res);
-                return Promise.resolve();
+                return Promise.resolve(res);
             }
             case -1: {
                 // 管理端错误消息
@@ -97,7 +97,7 @@ export async function tradeServerRequest<Req, Rsp>(reqKey: keyof typeof FunCode,
                 // 银行 业务 以 Status 作为判断依据
                 if (Status === 0 || Status == 6007) {
                     success && success(res);
-                    return Promise.resolve();
+                    return Promise.resolve(res);
                 }
                 const msg = errorInfoStore.actions.getErrorInfoByCode(RetCode || Status);
                 const error = String(RetDesc || RetCode);

+ 5 - 9
src/utils/websocket/index.ts

@@ -27,8 +27,6 @@ export class MTP2WebSocket<T extends Package40 | Package50>{
     private currentSerial = 1;
     /** 信息发送异步建值对 */
     private asyncTaskMap = new Map<number, AsyncTask<T>>();
-    /** 初始默认重连间隔时长 */
-    private defaultReconnectInterval = 5 * 1000;
     /** 连接准备完成 */
     private onReady?: Promise<MTP2WebSocket<T>>;
 
@@ -51,8 +49,6 @@ export class MTP2WebSocket<T extends Package40 | Package50>{
     reconnectCount = 0;
     /** 心跳间隔时长,默认为30秒 */
     beatInterval = 30 * 1000;
-    /** 重连间隔时长,默认为5秒 */
-    reconnectInterval = this.defaultReconnectInterval;
     /** 消息超时时长,默认为15秒 */
     timeoutInterval = 15 * 1000;
 
@@ -125,7 +121,6 @@ export class MTP2WebSocket<T extends Package40 | Package50>{
         this.stopHeartBeat();
         this.uuid = v4(); // 改变实例标识,取消重连状态
         this.reconnectCount = 0;
-        this.reconnectInterval = this.defaultReconnectInterval;
 
         if (this.ws) {
             this.ws.close();
@@ -194,23 +189,24 @@ export class MTP2WebSocket<T extends Package40 | Package50>{
         if (this.connState !== 'Connecting') {
             this.reconnectCount++;
             this.onBeforeReconnect && this.onBeforeReconnect(this.reconnectCount);
-            console.log(this.Package.name, this.host, `${this.reconnectInterval / 1000}秒后将进行第${this.reconnectCount}次重连`);
+
+            // 自动计算每次重试的延时,重试次数越多,延时越大
+            const delay = this.reconnectCount * 5000
+            console.log(this.Package.name, this.host, `${delay / 1000}秒后将进行第${this.reconnectCount}次重连`);
 
             this.reconnectTimer = window.setTimeout(() => {
                 this.onReady = undefined;
                 this.connect().then(() => {
                     console.log(this.Package.name, this.host, '重连成功,可开始进行业务操作');
                     this.reconnectCount = 0;
-                    this.reconnectInterval = this.defaultReconnectInterval;
                     this.onReconnect && this.onReconnect();
                 }).catch(() => {
                     // 重连失败会进入 ws.onclose 再次发起重连
                     if (this.reconnectCount) {
-                        this.reconnectInterval += this.defaultReconnectInterval; // 重连间隔时间每次递增5秒
                         console.warn(this.Package.name, this.host, `第${this.reconnectCount}次重连失败`);
                     }
                 })
-            }, this.reconnectInterval);
+            }, delay);
         }
     }
 

+ 20 - 1
vue.config.js

@@ -1,6 +1,8 @@
 const { resolve } = require('path')
-const moment = require('moment')
 const { defineConfig } = require('@vue/cli-service')
+const moment = require('moment')
+const CompressionPlugin = require('compression-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 
 module.exports = defineConfig({
   transpileDependencies: [/node_modules/],
@@ -17,8 +19,25 @@ module.exports = defineConfig({
       }
     }
   },
+  css: {
+    extract: true, // 是否使用css分离插件 ExtractTextPlugin
+    sourceMap: false,
+  },
   chainWebpack: (config) => {
     config.resolve.alias
       .set('@' + process.env.VUE_APP_ENV, resolve(__dirname, process.env.VUE_APP_ROOT))
+
+    config.plugin('compressionPlugin')
+      .use(new CompressionPlugin({
+        test: /\.js$|\.html$|\.css/, // 匹配文件名
+        threshold: 10240, // 对超过10k的数据压缩
+      }))
+
+    config.plugin('fork-ts-checker')
+      .use(new ForkTsCheckerWebpackPlugin({
+        typescript: {
+          memoryLimit: 4096,
+        },
+      }))
   }
 })