axios中取消请求及阻止重复请求的方法

前言：

在实际项目中，我们可能需要对请求进行“防抖”处理。这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。这里我列举两种比较常见的实际情况：
1.PC端 - 用户双击搜索按钮，可能会触发两次搜索请求
2.移动端 - 因移动端没有点击延迟，所以极易造成误操作或多操作，造成请求重发

核心——

• 在Axios中取消请求最核心的方法是CanelToken。在官网文档中有写到两种方法使用CancelToken，这里简单粘贴出来，并增加了注释

方法1：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  // 必须对请求进行cancelToken设置
  cancelToken: source.token
}).catch(function (thrown) {
  // 如果请求被取消则进入该方法判断
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// 取消上面的请求
// source.cancel('messge') message为可选项，必须为String
source.cancel('Operation canceled by the user.');

方法2：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  // 在options中直接创建一个cancelToken对象
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

// 取消上面的请求
cancel();

app项目中搜索功能请求的拦截

<script>
export default {
    name : 'Search',
    data(){
        return {
            message : '',
            moviesList : []
        }
    },
    methods : {
        //首先在methods中定义cancelRequest()方法
        cancelRequest(){
            if(typeof this.source ==='function'){
                this.source('终止请求')
            }
        }
    },
       //用watch去监听message输入框
    watch : {
        message(newVal){
            var that = this;
            var cityId = this.$store.state.city.id;
            this.cancelRequest();
            this.axios.get('/api/searchList? cityId='+ cityId +'&kw='+newVal,{
                cancelToken: new this.axios.CancelToken(function(c){
                    that.source = c;
                })
            }).then((res)=>{
                var msg = res.data.msg;
                var movies = res.data.data.movies;
                if(msg && movies){
                    this.moviesList = res.data.data.movies.list;
                }
            }).catch((err) => {
                if (this.axios.isCancel(err)) {
                    console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message
                } else {
                    //handle error
                    console.log(err);
                }
            });
        }
    }
}
</script>