vue频繁切换页面、标签页解决方案

Posted on | 阅读数

背景

在平常的开发过程中，我们经常会遇到频繁切换菜单或者切换 tabs,而每一次切换都会调取接口返回数据渲染（接口请求过快，大部分还在pending中），那么这些请求就会极大的影响页面的性能，因为即便切换了页面，那些请求依然会触发下去。为了节省这部分性能，所以做了下面这些处理。

配置

  • Tips:本文主要根据 axios 来做的处理

axios 文件配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//axios文件
window.canCancelAxios = []; //全局 所有拦截对象存储
window.canAxios = {}; //拦截对象去重

// http request 拦截器
axios.interceptors.request.use(
  config => {
    let whiteList = ["/order/login.htm"]; // 白名单接口
    if (config.url && whiteList.every(item => !config.url.includes(item))) {
      if (canAxios[config.url]) {
        //过滤
      } else {
        config.cancelToken = new axios.CancelToken(function(c) {
          window.canCancelAxios.push({ key: config.url || "", cancel: c });
        });
      }
    }

    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

定义取消方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * 取消axios请求
 * @param cellArr 要取消的接口；如果不传参，则取消canCancelAxios保存的所有接口
 */
export function cancelAxios(cellArr = []) {
  if (cellArr.length > 0) {
    cellArr.forEach(val => {
      for (let i = 0; i < window.canCancelAxios.length; i++) {
        if (window.canCancelAxios[i].key === val) {
          window.canCancelAxios[i].cancel();
          window.canCancelAxios.splice(i, 1);
          i--;
        }
      }
    });
  } else {
    for (let i = 0; i < window.canCancelAxios.length; i++) {
      window.canCancelAxios[i].cancel();
      window.canCancelAxios.splice(i, 1);
      i--;
    }
  }
}

路由切换时，取消 axios 请求

1
2
3
4
5
import cancelAxios from "***";
router.beforeEach((to, from, next) => {
  cancelAxios();
  // 进行其他业务操作
});

切换 tab 页时,取消部分请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//此处用的iview ui,由于业务逻辑修改 把keep-alive关闭了... 此处忽略
<Tabs type="card" class="Tabs" :animated="false" @on-click="changeTabs">
      <TabPane :label="PENDING_Title">
        <!-- <keep-alive> -->
        <pending v-if="tabIndex == 0" />
        <!-- </keep-alive> -->
      </TabPane>
      <TabPane :label="CONFIRMER_Title">
        <!-- <keep-alive> -->
        <confirmer v-if="tabIndex == 1" />
        <!-- </keep-alive> -->
      </TabPane>
      <TabPane :label="READY_TO_SHIP_Title">
        <!-- <keep-alive> -->
        <readyShip v-if="tabIndex == 2" />
        <!-- </keep-alive> -->
      </TabPane>
      <TabPane :label="SHIPPED_Title">
        <!-- <keep-alive> -->
        <shipped v-if="tabIndex == 3" />
        <!-- </keep-alive> -->
      </TabPane>
      <TabPane :label="CANCELED_Title">
        <!-- <keep-alive> -->
        <canceled v-if="tabIndex == 4" />
        <!-- </keep-alive> -->
      </TabPane>
    </Tabs>
1
2
3
4
5
6
7
8
//此处就是  切换tabs时 tabIndex会改变,当值变化时 取消一些正在请求的接口
import { cancelAxios } from "@/libs/cancelAxios";

watch: {
    tabIndex() {
      this.cancelAxios(["/order/listOrder.htm"]);
    }
  },

结尾

最后奉上效果图
47240234723042.PNG