结束上次axios请求

背景：本人在做一个菜单切换的时候，有时候页面还在请求数据，用户点击切换比较快，换到另一个菜单选项了，但是请求还没结束，导致页面存留是上次的数据。想到解决这个bug的直接方法就是结束上一次的请求。
上代码：
本人用的是axios来请求数据

// 引入axios 
import axios from 'axios'

export default {
    data () {
        return {
            cancel:null
        }
    },
    watch:{
        active(){
        	// 调用cancel接受到的方法
            this.cancel()
            this.orderList()
            this.orderData()
        }
    },
    methods: {
        orderList () {
        	// 使用 cancel token 取消请求  切记不要使用自己绑定到vue原型上面请求的方法（本人就上过当）
            const CancelToken = axios.CancelToken
            const that = this
            const { page, limit, type} = this
            this.$http.get('/api/order/list', {
                cancelToken: new CancelToken(function executor(c) {
                    // executor 函数接收一个 cancel 函数作为参数
                    that.cancel = c;
                }),
                params: {
                    page,
                    limit,
                    type
                }})
                .then(res => {
                    this.orderlist = this.orderlist.concat(res.data)
                    if(res.data.length < this.limit){
                        this.finished = true
                    }
                    this.load = false
                }).catch(err => {
                console.log('获取失败')
            })
        },

贴上网址 留下证据
axios中文文档

下班了 ！！！！
拜拜