CN-747: http请求支持取消

src/components/common/TimeRange/DateTimeRange.vue

@@ -10,8 +10,9 @@
       <div class="calendar-popover-text" v-else>
         {{ showDetail }}
       </div>
-      <div class="calendar-popover-text calendar-popover__small"><i class="cn-icon cn-icon-dropdown"
-                                            :class="dropdownFlag ? 'cn-icon-up' : ''"></i></div>
+      <div class="calendar-popover-text calendar-popover__small">
+        <i class="cn-icon cn-icon-dropdown" :class="dropdownFlag ? 'cn-icon-up' : ''"></i>
+      </div>
     </div>
     <transition name="el-zoom-in-top">
       <div v-if="dropdownFlag" class="date-range-panel">
@@ -82,6 +83,7 @@ import { ref, computed } from 'vue'
 import MyDatePicker from '../MyDatePicker'
 import { storageKey } from '@/utils/constants'
 import { getMillisecond } from '@/utils/date-util'
+import { useStore } from 'vuex'
 
 export default {
   name: 'DateTimeRange',
@@ -112,6 +114,7 @@ export default {
   },
   setup (props, ctx) {
     // data
+    const store = useStore()
     const myStartTime = ref(props.startTime)
     const myEndTime = ref(props.endTime)
     const timeArr = ref([myStartTime.value, myEndTime.value])
@@ -233,6 +236,7 @@ export default {
       returnValue()
     }
     const returnValue = () => {
+      cancelHttp()
       rangeHistory.value.unshift({
         start: myStartTime.value,
         end: myEndTime.value
@@ -241,6 +245,16 @@ export default {
       ctx.emit('change', myStartTime.value, myEndTime.value, dateRangeValue)
       dropdownFlag.value = false
     }
+    const cancelHttp = () => {
+      const cancelList = store.state.panel.httpCancel
+      // console.log('DateTimeRange.vue------cancelHttp------查看终止数量', cancelList, cancelList.length)
+      if (cancelList.length > 0) {
+        cancelList.forEach((cancel, index) => {
+          cancel()
+          delete cancelList[index]
+        })
+      }
+    }
     return {
       myStartTime,
       myEndTime,

src/components/common/TimeRange/TimeRefresh.vue

@@ -12,8 +12,8 @@
         <transition name="el-zoom-in-top">
             <div v-if="dropdownShow" class="refresh-list">
                 <div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
-                  {{item.label}}
-                  <i v-if="item.value==interval" class="cn-icon cn-icon-check"></i>
+                  {{ item.label }}
+                  <i v-if="item.value===interval" class="cn-icon cn-icon-check"></i>
                 </div>
             </div>
         </transition>
@@ -103,7 +103,16 @@ export default {
       this.interLabel = val.value == -1 ? '' : val.label
       this.dropdownShow = false
       const now = window.$dayJs.tz().valueOf()
-      if (val && val.value != -1) {
+      if (val && val.value !== -1) {
+        // 切换轮询请求时间频率时，发现有未结束的请求，终止请求
+        const cancelList = this.$store.state.panel.httpCancel
+        // console.log('timeRefresh.vue------setRefresh------查看终止数量', cancelList, cancelList.length)
+        if (cancelList.length > 0) {
+          cancelList.forEach((cancel, index) => {
+            cancel()
+            delete cancelList[index]
+          })
+        }
         // 向地址栏添加自动刷新频率
         const dateParam = {
           refreshTime: val.value
@@ -121,7 +130,7 @@ export default {
         }
         return
       }
-      if (val && val.value == -1) {
+      if (val && val.value === -1) {
         // 清除定时器
         clearInterval(this.intervalTimer)
 

src/store/modules/panel.js

@@ -51,7 +51,8 @@ const panel = {
     npmLocationCountry: '', // npm location的查询条件--国家
     npmLocationSide: 'server', // npm location的查询条件--方向
     refreshTime: null, // 自动刷新时间的秒数
-    refreshFlag: true // 关闭自动刷新标志，true为off，false即开启自动刷新
+    refreshFlag: true, // 关闭自动刷新标志，true为off，false即开启自动刷新
+    httpCancel: null // 终止http请求
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -146,6 +147,9 @@ const panel = {
     },
     setRefreshFlag (state, flag) {
       state.refreshFlag = flag
+    },
+    setHttpCancel (state, cancel) {
+      state.httpCancel = cancel
     }
   },
   getters: {

src/utils/http.js

@@ -1,8 +1,20 @@
 import axios from 'axios'
 import { storageKey } from '@/utils/constants'
+import store from '@/store'
+
+const CancelToken = axios.CancelToken
 
 axios.interceptors.request.use(config => {
   const token = localStorage.getItem(storageKey.token)
+
+  // 添加http请求终止方法
+  const arr = []
+  const cancelToken = new CancelToken(function executor (c) {
+    arr.push(c)
+    store.commit('setHttpCancel', arr)
+  })
+
+  config.cancelToken = cancelToken
   if (token) {
     config.headers['Cn-Authorization'] = token // 请求头token
   }

src/views/charts2/Panel.vue

@@ -55,6 +55,7 @@ import { getTypeCategory } from '@/views/charts/charts/tools'
 import { computeScore, urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import ChartList from '@/views/charts2/ChartList'
 import { get } from '@/utils/http'
+import { useStore } from 'vuex'
 
 export default {
   name: 'Panel',
@@ -156,6 +157,19 @@ export default {
     })
   },
   setup (props, ctx) {
+    // todo 目前在panel页面测试，后续会挪到router里
+    const store = useStore()
+    const cancelList = store.state.panel.httpCancel
+
+    // 进入页面时，发现有未结束的请求，终止请求
+    // console.log('panel.vue------setup------查看http终止情况', cancelList, cancelList.length)
+    if (cancelList.length > 0) {
+      cancelList.forEach((cancel, index) => {
+        cancel()
+        delete cancelList[index]
+      })
+    }
+
     const panel = ref({})
     let panelType = 1 // 取得panel的type
     const { params, query } = useRoute()

src/views/charts2/charts/linkMonitor/LinkBlock.vue

@@ -223,7 +223,6 @@ export default {
           })
           this.linkData = sorted
 
-          // todo 此处去重不优美，后续再处理
           let directionArr = []
           nextHopData.forEach((item) => {
             if (item.egressLinkDirection !== '' && item.ingressLinkDirection !== '') {