vue axios请求频繁时取消上一次请求 (及请求拦截 响应拦截))

方法一 取消上一次请求 cancelRequest();

 <script>
        import axios from 'axios'
        import qs from 'qs'
        
        export default {
            methods: {
                request(keyword) {
                    var CancelToken = axios.CancelToken
                    var source = CancelToken.source()
                      
                    // 取消上一次请求
                    this.cancelRequest();
                    
                    axios.post(url, qs.stringify({kw:keyword}), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'Accept': 'application/json'
                        },
                        cancelToken: new axios.CancelToken(function executor(c) {
                            that.source = c;
                        })
                    }).then((res) => {
                        // 在这里处理得到的数据
                        ...
                    }).catch((err) => {
                        if (axios.isCancel(err)) {
                            console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message
                        } else {
                            //handle error
                            console.log(err);
                        }
                    })
                },
                cancelRequest(){
                    if(typeof this.source ==='function'){
                        this.source('终止请求')  这样就可以成功取消上一次请求啦！真的非常好用~
                    }
                },
            }
        }
        </script>
      

请求拦截（配置发送请求的信息）

// 请求拦截（配置发送请求的信息）
// 请求拦截    为每一次请求添加token（配置发送请求的信息）
axios.interceptors.request.use(function (config){
  // 处理请求之前的配置
  config.headers.Authorization=window.sessionStorage.getItem('token')
  return config;
  }, function (error){
  // 请求失败的处理
  return Promise.reject(error);
  });

响应拦截（配置请求回来的信息)

// 响应拦截（配置请求回来的信息）
axios.interceptors.response.use(function (response){
 // 处理响应数据
 return response;
 }, function (error){
 // 处理响应失败
 return Promise.reject(error);
 });

Vue.prototype.$http=axios//其他页面在使用axios的时候直接this.$http就可以了

方法二

        

 data() {
    return {
		timer:''
    }
}                

//请求方法调用之前 取消上次的请求  也可达到目的 

   clearTimeout(that.timer)
                         
       that.timer=setTimeout(function(){
                         
        Indicator.open()
        that.httpServe.request(API.openAgreePay,'post',{
        

        }，800)