优化接口速度

wangjiaxi90 · Dec 11, 2021 · 4ded798 · 4ded798
1 parent 49bbf82
commit 4ded798
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 86 deletions.
diff --git a/app/Http/Controllers/Api/UsersController.php b/app/Http/Controllers/Api/UsersController.php
@@ -363,7 +363,7 @@ public function search()
      * @apiGroup users
      * @apiName basic
      *
-     * @apiParam {Number} userid          会员ID(多个格式：jsonArray，一次最多30个)
+     * @apiParam {Number} userid          会员ID(多个格式：jsonArray，一次最多50个)
      *
      * @apiSuccess {Number} ret     返回状态码（1正确、0错误）
      * @apiSuccess {String} msg     返回信息（错误描述）

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "DooTask",
-    "version": "0.3.69",
+    "version": "0.3.68",
     "description": "DooTask is task management system.",
     "scripts": {
         "start": "./cmd dev",

diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/js/build/107.js b/public/js/build/107.js
diff --git a/public/js/build/126.js b/public/js/build/126.js
diff --git a/public/js/build/726.js b/public/js/build/726.js
diff --git a/resources/assets/js/components/UserAvatar.vue b/resources/assets/js/components/UserAvatar.vue
@@ -28,6 +28,8 @@
 
 <script>
     import {mapState} from "vuex";
+    import {Store} from 'le5le-store';
+
     export default {
         name: 'UserAvatar',
         props: {
@@ -67,18 +69,27 @@
                 type: String,
                 default: ''
             },
-            asynch: {
-                type: Boolean,
-                default: true
-            },
         },
         data() {
             return {
-                user: null
+                user: null,
+                subscribe: null
             }
         },
         mounted() {
-            this.getData()
+            this.getData();
+            //
+            this.subscribe = Store.subscribe('cacheUserActive', (data) => {
+                if (data.userid == this.userid) {
+                    this.user = data;
+                }
+            });
+        },
+        beforeDestroy() {
+            if (this.subscribe) {
+                this.subscribe.unsubscribe();
+                this.subscribe = null;
+            }
         },
         computed: {
             ...mapState(["userId", "userInfo", "userOnline"]),
@@ -176,20 +187,7 @@
                     this.user = this.userInfo;
                     return;
                 }
-                if (this.asynch) {
-                    setTimeout(this.loadData);
-                } else {
-                    this.loadData();
-                }
-            },
-
-            loadData() {
-                this.$store.dispatch("getUserBasic", {
-                    userid: this.userid,
-                    success: (user) => {
-                        this.user = user;
-                    }
-                });
+                this.$store.dispatch("getUserBasic", {userid: this.userid});
             },
 
             openDialog() {

diff --git a/resources/assets/js/components/UserInput.vue b/resources/assets/js/components/UserInput.vue
@@ -36,6 +36,8 @@
 </template>
 
 <script>
+    import {Store} from 'le5le-store';
+
     export default {
         name: 'UserInput',
         props: {
@@ -85,7 +87,10 @@
                 loading: false,
                 openLoad: false,
                 values: [],
-                list: []
+
+                list: [],
+                options: [],
+                subscribe: null,
             }
         },
         mounted() {
@@ -97,6 +102,24 @@
             this.$nextTick(() => {
                 this.ready = true;
             });
+            this.subscribe = Store.subscribe('cacheUserActive', (data) => {
+                let index = this.list.findIndex(({userid}) => userid == data.userid);
+                if (index > -1) {
+                    this.initialized = true;
+                    this.$set(this.list, index, Object.assign({}, this.list[index], data));
+                }
+                let option = this.options.find(({value}) => value == data.userid);
+                if (option) {
+                    this.$set(option, 'label', data.nickname)
+                    this.$set(option, 'avatar', data.userimg)
+                }
+            });
+        },
+        beforeDestroy() {
+            if (this.subscribe) {
+                this.subscribe.unsubscribe();
+                this.subscribe = null;
+            }
         },
         computed: {
             maxHiddenClass() {
@@ -128,32 +151,13 @@
             },
 
             setDefaultOptions(options) {
-                const userids = [];
+                this.options = options;
                 options.forEach(({value, label}) => {
                     this.list.push({
                         userid: value,
                         nickname: label,
                     });
-                    userids.push(value);
-                });
-                //
-                this.$store.dispatch("getUserBasic", {
-                    userid: userids,
-                    complete: () => {
-                        this.initialized = true;
-                    },
-                    success: (user) => {
-                        let option = options.find(({value}) => value == user.userid);
-                        if (option) {
-                            this.$set(option, 'label', user.nickname)
-                            this.$set(option, 'avatar', user.userimg)
-                        }
-                        this.list.some((item, index) => {
-                            if (item.userid == user.userid) {
-                                this.$set(this.list, index, Object.assign(item, user));
-                            }
-                        });
-                    }
+                    this.$store.dispatch("getUserBasic", {userid: value});
                 });
             },
 

diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js
@@ -1,3 +1,5 @@
+import {Store} from 'le5le-store';
+
 export default {
     /**
      * 访问接口
@@ -204,64 +206,83 @@ export default {
      * 获取用户基础信息
      * @param state
      * @param dispatch
-     * @param params {userid, success, complete}
+     * @param data {userid}
      */
-    getUserBasic({state, dispatch}, params) {
-        if (!state.method.isJson(params)) {
+    getUserBasic({state, dispatch}, data) {
+        if (state.cacheLoading["loadUserBasic"] === true) {
+            data && state.cacheUserWait.push(data);
             return;
         }
-        const {userid, success, complete} = params;
-        if (userid === state.userId) {
-            typeof success === "function" && success(state.userInfo, true);
-            return;
+        //
+        let time = $A.Time();
+        let list = state.method.cloneJSON(state.cacheUserWait);
+        if (data && data.userid) {
+            list.push(data)
         }
-        const time = state.method.Time();
-        const array = [];
-        (state.method.isArray(userid) ? userid : [userid]).some((uid) => {
-            if (state.cacheUserBasic[uid]) {
-                typeof success === "function" && success(state.cacheUserBasic[uid].data, false);
-                if (time - state.cacheUserBasic[uid].time <= 30) {
-                    return false;
-                }
+        state.cacheUserWait = [];
+        //
+        let array = [];
+        let timeout = 0;
+        list.some((item) => {
+            let temp = state.cacheUserBasic.find(({userid}) => userid == item.userid);
+            if (temp && time - temp._time <= 30) {
+                setTimeout(() => {
+                    state.cacheUserActive = Object.assign(temp, {__:Math.random()});
+                    Store.set('cacheUserActive', temp);
+                }, timeout += 5);
+                return false;
             }
-            array.push(uid);
+            array.push(item);
         });
         if (array.length === 0) {
-            typeof complete === "function" && complete()
             return;
+        } else if (array.length > 30) {
+            state.cacheUserWait = array.slice(30)
+            array = array.slice(0, 30)
         }
         //
-        if (state.cacheUserBasic["::load"] === true) {
-            setTimeout(() => {
-                dispatch("getUserBasic", params);
-            }, 20);
-            return;
-        }
-        state.cacheUserBasic["::load"] = true;
+        state.cacheLoading["loadUserBasic"] = true;
         dispatch("call", {
             url: 'users/basic',
             data: {
-                userid: array
+                userid: array.map(({userid}) => userid)
             },
         }).then(result => {
-            state.cacheUserBasic["::load"] = false;
-            typeof complete === "function" && complete()
-            result.data.forEach((item) => {
-                state.cacheUserBasic[item.userid] = {
-                    time,
-                    data: item
-                };
-                state.method.setStorage("cacheUserBasic", state.cacheUserBasic);
-                dispatch("saveUserOnlineStatus", item);
-                typeof success === "function" && success(item, true)
+            time = $A.Time();
+            array.forEach((value) => {
+                let data = result.data.find(({userid}) => userid == value.userid) || Object.assign(value, {email: ""});
+                data._time = time;
+                dispatch("saveUserBasic", data);
             });
+            state.cacheLoading["loadUserBasic"] = false;
+            dispatch("getUserBasic");
         }).catch(e => {
             console.error(e);
-            state.cacheUserBasic["::load"] = false;
-            typeof complete === "function" && complete()
+            state.cacheLoading["loadUserBasic"] = false;
+            dispatch("getUserBasic");
         });
     },
 
+    /**
+     * 保存用户基础信息
+     * @param state
+     * @param data
+     */
+    saveUserBasic({state}, data) {
+        let index = state.cacheUserBasic.findIndex(({userid}) => userid == data.userid);
+        if (index > -1) {
+            data = Object.assign(state.cacheUserBasic[index], data)
+            state.cacheUserBasic.splice(index, 1, data);
+        } else {
+            state.cacheUserBasic.push(data)
+        }
+        state.cacheUserActive = Object.assign(data, {__:Math.random()});
+        Store.set('cacheUserActive', data);
+        setTimeout(() => {
+            state.method.setStorage("cacheUserBasic", state.cacheUserBasic);
+        })
+    },
+
     /**
      * 登出（打开登录页面）
      * @param state

diff --git a/resources/assets/js/store/state.js b/resources/assets/js/store/state.js
@@ -262,9 +262,15 @@ const state = { method };
 state.windowMax768 = window.innerWidth <= 768;
 
 // 数据缓存
-state.cacheUserBasic = state.method.getStorageJson("cacheUserBasic");
+state.cacheLoading = {};
+// User
+state.cacheUserActive = {};
+state.cacheUserWait = [];
+state.cacheUserBasic = state.method.getStorageArray("cacheUserBasic");
+// Dialog
 state.cacheDialogs = state.method.getStorageArray("cacheDialogs");
 state.cacheDialogMsgs = state.method.getStorageArray("cacheDialogMsgs");
+// Project
 state.cacheProjects = state.method.getStorageArray("cacheProjects");
 state.cacheColumns = state.method.getStorageArray("cacheColumns");
 state.cacheTasks = state.method.getStorageArray("cacheTasks");