财务2.8小优化 多次的列表请求只取返回之前的最后一次的值

src/utils/request.js

@@ -8,20 +8,42 @@ const request = axios.create({
 
 })
 
-let requestList=new Set()
+// 对于重复的post请求，只处理第一次请求，后续重复的请求在上一次返回之前都取消
+const postRequestList=new Set()
+
+
+// 需要储存每次请求对应的取消方法
+let lastGetRequestList=new Map()
+// 取消方法
+const removePreRequest=(Url,fun)=>{
+  console.log(lastGetRequestList);
+  if(lastGetRequestList.has(Url)){
+    // 取消上一次请求
+    lastGetRequestList.get(Url)(`${Url}---重复请求被中断`)
+    // 设置 新的取消方法
+    lastGetRequestList.set(Url,fun)
+  }
+}
 
 request.interceptors.request.use(
   config=>{
-    // console.log(config);
     config.headers['Authorization'] = localStorage.getItem('fsms_token') || ''
        // 不处理get请求
     if (config.method !== 'get') {
       // 利用axios cancelToken 先取消请求
       config.cancelToken = new axios.CancelToken(e => {
-        // console.log(e, config, 'CancelToken')
         // 在这里取消重复请求，上个请求未完成时，相同的请求不会再次执行
-        requestList.has(`${config.url}`) ? e(`${config.url}---重复请求被中断`) : requestList.add(`${config.url}`)
+        postRequestList.has(config.url) ? e(`${config.url}---重复请求被中断`) : postRequestList.add(config.url)
       })
+    }else if(config.params?.takeLastRequestResult){
+      // 对于get请求中的参数有 takeLastRequestResult 且值为真 进行特殊处理，若重名 请不要更改这个名字
+      config.cancelToken = new axios.CancelToken((c)=>{
+        lastGetRequestList.has(config.url) ? removePreRequest(config.url,c) : lastGetRequestList.set(config.url,c)
+      });
+      // 去除参数中的 takeLastRequestResult
+      if(config.params){
+        config.params.takeLastRequestResult=undefined
+      }
     }
     return config
   },
@@ -33,7 +55,8 @@ request.interceptors.request.use(
 
 request.interceptors.response.use(
   res=>{
-    requestList.delete(`${res.config.url}`)
+    postRequestList.delete(`${res.config.url}`)
+    lastGetRequestList.delete(`${res.config.url}`)
     if(res.request.responseType==='blob' || res.request.responseType==='Blob'){
        // 字节流
        if(res.status === 200){
@@ -64,10 +87,13 @@ request.interceptors.response.use(
     }
   },
   err=>{
-    requestList.clear()
     const {message} = err
     console.log(message,'--错误信息');
     if(!err.__CANCEL__){
+      // 清除
+      postRequestList.clear()
+      lastGetRequestList.clear()
+
       // 多次点击由CancelToken取消的请求不给错误提示
       ElMessage({
         message: message || '网络异常',

src/views/financialStatistics/businessIncome.vue

@@ -17,11 +17,12 @@
     start_date:'',
     end_date:'',
     seller_ids:'',
-    is_export:0
+    is_export:0,
+    // 不是后端所需要的值，在axios中用到的值，具体请看@/utils/request.js文件
+    takeLastRequestResult:true
   })
   // 加载状态
   const loading=reactive({
-    search:false,
     list:true,
     export:false
   })
@@ -108,16 +109,18 @@
     ]
   }
   const getList=()=>{
-    // 月度/季度/月度累计 数据返回速度较慢 给个加载框，防止先请求的数据后到
-    if([0,1,4].includes(searchParams.list_param)) loading.search=true
+    loading.list=true
     getIncomeChartData(searchParams).then(res=>{
       // console.log(res);
       let dates = res.data.Date || []
       chartOptions.value.series[0].data=dates.map((item,index)=> [item,res.data.TotalMoney[index]])
       chartOptions.value.series[1].data=dates.map((item,index)=> [item,res.data.Yoy[index]])
-    }).finally(()=>{
       loading.list=false
-      loading.search=false
+    }).catch(err=>{
+      if(!err.__CANCEL__){
+        // 不是因为取消的错误才设置为false
+        loading.list=false
+      }
     })
   }
 
@@ -140,7 +143,7 @@
       <div class="business-income-top">
         <div class="business-income-search-zone">
           <el-radio-group v-model="searchParams.list_param" size="large" @change="getList"
-          style="margin: 0 30px 8px 0;" v-loading="loading.search">
+          style="margin: 0 30px 8px 0;">
             <el-radio-button v-for="item in dimensionArray" :key="item.tag" class="dimension-radio"
             :label="item.tag" >{{ item.label }}</el-radio-button>
           </el-radio-group>