jq和axios的取消請求

場景：

　　分頁： 每次點擊分頁會發送請求，若是上一次請求還未獲取到，下一次請求已經開始且先一步獲取到，那麼數據上會出現問題。

　　快速點擊會發送屢次請求，屢次點擊的時候通常的作法咱們會定義一個flag，此時也能夠採用取消請求的方法。

解決辦法：

　　方法一：每次提交新請求時都斷開以前的請求，保證同一時間等待的僅僅是一個請求

　　方法二：若是是列表請求，能夠在請求開始的時候給個遮罩層+loading效果，這樣只有等數據出來了，遮罩層消失，用戶才能夠進行操做。

（1）取消ajax請求

$.ajax、$.get、$.post都有同一個返回值，可使用對象接收，當請求未返回且想結束此次請求時，只須要針對對象使用abort()方法便可。

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

eg：

定義一個變量xhr：null

在方法中：

（2）取消axios請求

一、get請求

在全局定義CancelToken：

var CancelToken = axios.CancelToken
var cancel

在請求接口傳入cancelToken：

在須要終止的地方調用cancel（此處是watch裏面監聽的changePage，即切換頁碼的時候）：

二、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);
    },
     .......
}

 

遇到的問題：

暫未總結好= =