jq和axios的取消请求

场景：

　　分页： 每次点击分页会发送请求，如果上一次请求还未获取到，下一次请求已经开始且先一步获取到，那么数据上会出现问题。

　　快速点击会发送多次请求，多次点击的时候一般的做法我们会定义一个flag，此时也可以采用取消请求的方法。

解决办法：

　　方法一：每次提交新请求时都断开之前的请求，保证同一时间等待的仅仅是一个请求

　　方法二：如果是列表请求，可以在请求开始的时候给个遮罩层+loading效果，这样只有等数据出来了，遮罩层消失，用户才可以进行操作。

（1）取消ajax请求

$.ajax、$.get、$.post都有同一个返回值，可以使用对象接收，当请求未返回且想结束这次请求时，只需要针对对象使用abort()方法即可。

var req;
if(req !=null) req.abort();
req = $.ajax({ ... });

eg：

定义一个变量xhr：null

在方法中：

（2）取消axios请求

1、get请求

在全局定义CancelToken：

var CancelToken = axios.CancelToken
var cancel

在请求接口传入cancelToken：

在需要终止的地方调用cancel（此处是watch里面监听的changePage，即切换页码的时候）：

2、post请求

定义cancelObj存放每一个CancelToken.source()，保证每一个都是独一无二。

var CancelToen = axios.CancelToken
var cancelObj = []

因为posDataByUrl是个封装，我们只需对想要调用的url处理，那么可以过滤掉其他的（indexOf ），data.page是页码，可以根据它来达到存储不同的cancelToken:

axio_conf是配置，所以最终的目的是让cancelToken放在配置中:

调用：同样是在监听页码改变的时候终止上一次的请求，然后开始这一次的请求:

'use strict';
// axiosUrl存储所有接口地址
var axiosUrl = {
    caseBlackList: '/sp/v1/cases',
    //新案例详情接口（审核详情用到）
    getCasesDetail: '/sp/case/case-detail/',
     ......
};
var CancelToken = axios.CancelToken;
var cancelObj = [];
var axiosCommon = {
    axio_conf:{
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        timeout: 100000
    },
    upload_type: 1,
    reject: function (resolve, err, type,callback) {
        console.log(resolve, err, type)
        callback && callback()
    },
    // 获取cookie
    getCookie (keyword) {
        const reg = new RegExp('(^| )' + keyword + '=([^;]*)(;|$)')
        const arr = document.cookie.match(reg)
        let result = null
        if (arr) {
          result = unescape(arr[2])
        }
        return result;
    },
      // setCookie
    setCookie (name, value, expires, path, domain, secure) {
        document.cookie = name + '=' + escape(value) +
        ((expires) ? '; expires=' + expires : '') +
        ((path) ? '; path=' + path : '') +
        ((domain) ? '; domain=' + domain : '') +
        ((secure) ? '; secure' : '')
    },  // deleteCookie
   deleteCookie (name, domain, path) {
        this.getCookie(name, (message) => {
          if (message.result !== null) {
            document.cookie = name + '=' + message.result +
            ((path) ? '; path=' + path : '') +
            ((domain) ? '; domain=' + domain : '') +
            '; expires=Thu, 01-Jan-70 00:00:01 GMT'
          }
        })
      },
    // url参数查询
    getQueryString (name) {
        let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        let r = window.location.search.substr(1).match(reg)
        if (r != null) return decodeURI(r[2])
        return null
    },
    // axios post参数格式化
    stringify (data) {
        var params = new URLSearchParams();
        for (var i in data) {
            if (typeof data[i] == 'object') {
                params.append(i, JSON.stringify(data[i]));
            } else {
                params.append(i, data[i]);
            }
        }
        return params;
    },
    // 加上验证信息and去除缓存
    verify (data) {
        let self = this
        if (data === undefined) data = {};
        var authArr = [];
        for (var i in data) {
            authArr.push(i)
        }
        if (authArr.indexOf('auth_token')<0){
            data.auth_token = new Date().getTime()
            data.auth_username = new Date().getTime()
        }
        data.time = new Date().getTime();
        return data;
    },
    // 按动态url通过post方式请求接口
    postDataByUrl (url, data, callback) {
        let self = this;
        data = self.verify (data);
        if (url.indexOf(axiosUrl.postNewCaseList) !== -1) {
            cancelObj[Number(data.page)] = {}
            cancelObj[Number(data.page)].source = CancelToken.source()
            self.axio_conf.cancelToken = cancelObj[Number(data.page)].source.token
        }
        return new Promise(function (resolve, reject) {
            axios.post(url, Qs.stringify(data), self.axio_conf)
            .then(function (response) {
                if (response.status === 200) {
                    resolve({
                        data: response.data,
                        status: response.status
                    });
                }
            })
            .catch(function (error) {
                if (axios.isCancel(error)) {
                    // console.log('Request canceled', error.message);
                } else {
                    self.reject(resolve, error, 'post');
                }
            });
        })
    },
    // 按动态url通过put方式请求接口
    putDataByUrl (url, data, callback) {
        let self = this;
        data = self.verify (data);
        return new Promise(function (resolve, reject) {
            axios.put(url, Qs.stringify(data), self.axio_conf)
            .then(function (response) {
                if (response.status === 200) {
                    resolve({
                        data: response.data,
                        status: response.status
                    });
                }
            })
            .catch(function (error) {
                self.reject(resolve, error, 'put');
            });
        })
    },
    // 按动态url通过get方式获取数据
    getDataByUrl (url, data) {
        let self = this;
        data = self.verify (data);
        return new Promise(function (resolve, reject) {
            axios.get(url, {params: data}, self.axio_conf)
            .then(function (response) {
                if (response.status === 200) {
                    resolve({
                        data: response.data,
                        status: response.status
                    });
                }
            })
            .catch(function (error) {
                self.reject(resolve, error, 'get');
            });
        })
    },
     // 获得全部标签
    getAllTags (data) {
        return this.getDataByUrl(axiosUrl.tags,data)
    },
     // 案例列表-新
    postNewCaseList (username, data) {
        return this.postDataByUrl(axiosUrl.postNewCaseList + username, data);
    },
     .......
}

遇到的问题：

暂未总结好= =