perf：优化网络请求，请求成功后再进行请求

src/mixin/blockChainBrowser.ts

@@ -16,6 +16,13 @@ import {
 
 import { icustomizedTx } from "@/types/trade";
 import { getNodeNum } from "@/service/blockChainBrowser";
+import {
+  clearTimeoutFromTimerObj,
+  registerTimeoutToTimerObj,
+} from "@/utils/common";
+
+const TimerObj = {} as { [key: string]: number };
+const __timeout = 10 * 1e3;
 
 export default Vue.extend({
   data() {
@@ -42,26 +49,22 @@ export default Vue.extend({
     this.fetchTpsData();
     this.init();
     this.fetchLatestTxListData();
-    getNodeNum().then((res) => {
-      if (res.error === null) {
-        this.nodeNum = (res.result.countries || []).reduce((prev, cur) => {
-          return prev + cur.value;
-        }, 0);
-      }
-    });
-
-    this.timer = window.setInterval(() => {
-      this.fetchAllPos33TicketCountData();
-      this.fetchAccountCountData();
-      this.fetchTpsData();
-      this.init();
-      this.fetchLatestTxListData();
-    }, 15 * 1000);
+    this.fetchNodeNum();
   },
   beforeDestroy() {
-    window.clearInterval(this.timer);
+    clearTimeoutFromTimerObj(TimerObj);
   },
   methods: {
+    fetchNodeNum() {
+      getNodeNum().then((res) => {
+        if (res.error === null) {
+          this.nodeNum = (res.result.countries || []).reduce((prev, cur) => {
+            return prev + cur.value;
+          }, 0);
+          registerTimeoutToTimerObj(TimerObj, this.fetchNodeNum, __timeout);
+        }
+      });
+    },
     fetchTpsData() {
       getTxCountBewteenTimes(
         moment().unix(),
@@ -71,6 +74,7 @@ export default Vue.extend({
       ).then((res) => {
         if (res.error === null) {
           this.tps = Number((res.result / (24 * 60 * 60)).toFixed(2));
+          registerTimeoutToTimerObj(TimerObj, this.fetchTpsData, __timeout);
         }
       });
     },
@@ -87,6 +91,11 @@ export default Vue.extend({
             amount: i.amount,
             success: i.success,
           }));
+          registerTimeoutToTimerObj(
+            TimerObj,
+            this.fetchLatestTxListData,
+            __timeout
+          );
         }
       });
     },
@@ -94,6 +103,11 @@ export default Vue.extend({
       getAccountCount().then((ret) => {
         if (ret.error === null) {
           this.addressNumber = ret.result;
+          registerTimeoutToTimerObj(
+            TimerObj,
+            this.fetchAccountCountData,
+            __timeout
+          );
         }
       });
     },
@@ -101,6 +115,11 @@ export default Vue.extend({
       getAllPos33TicketCount().then((ret) => {
         if (ret.error === null) {
           this.ticketCount = ret.result;
+          registerTimeoutToTimerObj(
+            TimerObj,
+            this.fetchAllPos33TicketCountData,
+            __timeout
+          );
         }
       });
     },
@@ -111,9 +130,6 @@ export default Vue.extend({
           const lastBlock = res.result[1];
           const perTime =
             (lastBlock.time - fatherBlock.time) / (this.latestHeight - 725000);
-          // const perTxCount =
-          //   (lastBlock.tx_count - fatherBlock.tx_count) /
-          //   (lastBlock.time - fatherBlock.time);
           this.speed = Number(perTime.toFixed(2));
         }
       });
@@ -186,6 +202,7 @@ export default Vue.extend({
         const totalFeeRet = await getRpc(yccApi).queryTotalFee([str]);
         if (!totalFeeRet.error) {
           this.totalTx = totalFeeRet.result.txCount;
+          registerTimeoutToTimerObj(TimerObj, this.init, __timeout);
         }
       }
     },

src/utils/common.ts

@@ -60,3 +60,19 @@ const nFormatter = (num: number, digits = 2) => {
 };
 
 export { tradeAccuracy, nFormatter };
+
+export const registerTimeoutToTimerObj = (
+  TimerObj: { [key: string]: number },
+  func: () => any,
+  delay: number
+) => {
+  TimerObj[func.name] = window.setTimeout(() => {
+    func();
+  }, delay);
+};
+
+export const clearTimeoutFromTimerObj = (TimerObj: {
+  [key: string]: number;
+}) => {
+  Object.values(TimerObj).forEach((timer) => window.clearTimeout(timer));
+};