【axios 取消请求 防止多次请求】

 API 接口

export const getTable = (params,cancelToken={}) => axios.get('api/table_list/', {
    params: params,
    ...cancelToken
});

 main.js

import axios from 'axios'
Vue.prototype.$axios = axios

页面 .vue

 data 绑定 数据

data(){
    return {
        source:null
    }
}

 接口请求

methods:{
    changeInput(){
        this.cancelRequest();
        this.getData();
    },
    getData(){
        getTable(
            { id: this.sid },
            {
              cancelToken:new this.$axios.CancelToken( (c)=> {
                  this.source = c;
              })
            }
        )
        .then((res) => {

        })
        .catch(err => {
            if (this.$axios.isCancel(err)) {
            //请求如果被取消，这里是返回取消的message
              console.log('Rquest canceled', err.message); 
             } else {
             this.$notify.error({
               title: '数据获取失败',
               message: err,
               // duration: 0
             })
          }
        })
    },
    //这是一个取消axios多次请求的方法
    cancelRequest() {
        if (typeof this.source === 'function') {
            this.source('终止请求')
        }
    },
}