最近被问到了一个面试题，说tabs栏如果点击过于频繁，出现数据紊乱的情况该怎么办？咦~我还真没碰到过这个问题，这应该属于优化的知识点吧。于是我写了个demo，来跟我一起看看吧!

这是我没有做任何处理的样子

         看到没？第一，我已经点击完半天了，里面的数据还在切换。第二最终我tab停在配置管理，下面的内容应该是2，但是下面的内容竟然是3，这还得了？这简直是一个非常大的bug。有些小伙伴想到，能不能用防抖节流来做呢，答案是不可以的。用防抖和节流也有问题，我给你举个例子，你防抖时间设置1s，你接口请求10s返回数据，那我1.5秒点击一个tabs，避开防抖，但是接口会在10s，11.5s......后陆续返回结果，那岂不是和上面一样呢？下面我介绍一下我的办法吧!

        Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的，至于怎么用，看代码吧

<template>
    <div class="box">
        <el-card>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="用户管理" name="first">{{ curData }}</el-tab-pane>
                <el-tab-pane label="配置管理" name="second">{{ curData }}</el-tab-pane>
                <el-tab-pane label="角色管理" name="third">{{ curData }}</el-tab-pane>
                <el-tab-pane label="定时任务补偿" name="fourth">{{ curData }}</el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'second',
            curData: '',
            cancel: null
        };
    },
    methods: {
        getData(a) {
            // 管它三七二十一，先取消之前的请求，在继续下次请求
            if(this.cancel) {
                this.cancel()
            }
            let CancelToken = this.$axios.CancelToken;
            let self = this;

            this.$axios({
                url: 'http://localhost:3000/req',
                method: 'get',
                params: {
                    a
                },
                cancelToken: new CancelToken(function executor(c) {
                    // // 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数
                    self.cancel = c;
                })
            }).then((res) => {
                this.curData = res.data.data;
            });
        },
        // tab栏点击事件
        handleClick(tab) {
            // 获取当前tab栏的name属性值
            let tabname = tab.name;
            switch (tabname) {
                case 'first':
                    this.getData(1);
                    break;
                case 'second':
                    this.getData(2);
                    break;
                case 'third':
                    this.getData(3);
                    break;
                case 'fourth':
                    this.getData(4);
                    break;
            }
        }
    },
    mounted() {}
};
</script>

<style lang="less" scoped>
</style>

效果：

 怎么样？是不是完美的解决了，这样管你是不是网络延迟还是点击过快，我都不管，我就把上次请求给中断，保证我下一个请求不被影响