在main.js文件里

import router from ’router/’;import Vue from ’vue’;Vue.Cancel = [];router.beforeEach((to, from, next) => { while (Vue.Cancel.length > 0) { Vue.Cancel.shift()(’cancel’); } next();})

ajax文件

import Vue from ’vue’;import axios from ’axios’;import VueAxios from ’vue-axios’;Vue.use(VueAxios, axios);// 導入封裝的回調函數import { cbs, gbs} from ’config/’;// 動態設置本地和線上接口域名Vue.axios.defaults.baseURL = gbs.host;/** * 封裝axios的通用請求 * @param {string} type get或post * @param {string} url 請求的接口URL * @param {object} data 傳的參數，沒有則傳空對象 * @param {object} urlParams url傳參 * @param {Function} fn 回調函數 * @param {boolean} tokenFlag 是否需要攜帶token參數，為true，不需要；false，需要。一般除了登錄，都需要 */export default function ({ type, path, data, params, urlParams, fn, errFn, tokenFlag, headers, opts} = {}) { var options = { method: type, url: path, params: params, headers: headers && typeof headers === ’object’ ? headers : {}, cancelToken: new axios.CancelToken(function (cancel) { Vue.Cancel && Vue.Cancel.push(cancel) }) }; //檢測接口權限 var api_flag = true; if (options.url && options.url.indexOf(gbs.host) && this.$store.state.user.userinfo.access_status === 1) { var url = options.url.replace(gbs.host, ’’); var api_routers = this.$store.state.user.userinfo.api_routers; if (!api_routers || !api_routers.constructor === Object || !api_routers[url]) { api_flag = false; } } var urlParamsArray = []; if (api_flag === true) { options[type === ’get’ ? ’params’ : ’data’] = data; // 用于url傳參 if (typeof (urlParams) == 'object') { for (var k in urlParams) { urlParamsArray.push(k + ’=’ + urlParams[k]) } options.url += ’?’ + urlParamsArray.join(’&’); } if (typeof (urlParams) == 'string' || typeof (urlParams) == 'number') { options.url += urlParams; } if(options.url.indexOf(’?’) > -1){ options.url += ’&_=’ + (new Date()).getTime(); }else{ options.url += ’?_=’ + (new Date()).getTime(); } // 分發顯示加載樣式任務 this.$store.dispatch(’show_loading’); if (tokenFlag !== true) { //如果你們的后臺不會接受headers里面的參數，打開這個注釋，即實現token通過普通參數方式傳 // data.token = this.$store.state.user.userinfo.token; options.headers.token = this.$store.state.user.userinfo.token; } //擴展Promise使支持finally()，用了babel就不用手寫了^.^ // Promise.prototype.finally=function(callback){ // let Promise = this.constructor; // return this.then( // value => Promise.resolve(callback()).then(() => value), // reason => Promise.resolve(callback()).then(() => { throw reason }) // ); // }; //發送請求 return new Promise((resolve, reject)=>{ Vue.axios(options).then((res) => { this.$store.dispatch(’hide_loading’); if (res.data[gbs.api_status_key_field] === gbs.api_status_value_field || (res.status === gbs.api_status_value_field && !res.data[gbs.api_status_key_field])) { fn(res.data); } else { if (gbs.api_custom[res.data[gbs.api_status_key_field]]) { gbs.api_custom[res.data[gbs.api_status_key_field]].call(this, res.data); } else { cbs.statusError.call(this, res.data); if (errFn) { errFn.call(this, res.data); } } } resolve(res.data); }).catch((err) => { if(err.response && err.response.status !== 403){ try{ errFn?errFn.call(this, this.$$lib__.isObject(err.response.data) ? err.response.data : {}):null; }catch(err){ console.error(err.message); } } if(err.response && err.response.data === ’’){ cbs.statusError.call(this, {status: err.response.status}); } else if (err.response && this.$$lib__.isObject(err.response.data)) { cbs.statusError.call(this, err.response.data); }else if(err.response){ cbs.requestError.call(this, err); } else { console.error(’Error from ’, ’'’+path+’'.’, err.message); } reject(err); }); }); } else { this.$alert(’您沒有權限請求該接口！’, ’請求錯誤’, { confirmButtonText: ’確定’, type: ’warning’ }); }};

核心代碼為cancelToken參數

var options = { method: type, url: path, params: params, headers: headers && typeof headers === ’object’ ? headers : {}, cancelToken: new axios.CancelToken(function (cancel) { Vue.Cancel && Vue.Cancel.push(cancel) }) };

補充知識：problem：vue組件局部刷新，在組件銷毀（destroyed）時取消刷新無效問題

場景：

一個群發消息列表（數組）

列表下有多條消息（元素）

每條正在發送的消息數據狀態需要實時刷新，發送完成時需要顯示成功提示符合且不需要刷新，然后3秒消失。首次顯示列表時，已經成功的狀態不顯示這個成功提示符。

1、定位確定采用局部刷新

2、進入消息列表請求獲取列表數據的接口，完成發送的消息不需顯示完成狀態

3、正在發送的消息首次渲染時就調用setTimeout輪詢刷新當前消息的接口，完成時，顯示完成狀態（新增一個完成狀態的字段）

4、頁面銷毀時，還在發送的消息也取消刷新

誤區：

1、每條消息沒有抽成一個單獨的組件，想要首次渲染組件調用刷新接口時，只能通過定義全局map變量來映射每條消息的刷新接口的定時器，明顯增加業務開發的復雜度，增加了一些不確定性的bug風險。

每條消息抽成組件之后，就可以在組件中的mounted中去調用刷新的接口，頁面銷毀時取消刷新可以在destroyed里面去銷毀。

2、這里的一個誤區是在destroyed里面去清除定時器的id，導致調用了destroyed鉤子刷新的定時器還是無法清除。將定時器id當做一個屬性值存在了每條數據所屬的對象中，然后在子組件（每條消息所屬的）中的destroyed中去讀取該對象的當前的定時器屬性，因為讀出來是undifined，其實并沒有拿到當前消息正在執行的定時器，所以清除不掉。

組件使用有誤，每一個組件都是一個獨立的元素，其中定義的變量也是私有的，定時器id定在當前組件的data中就可以了，不需要再在數組中的每一條消息中定一個專屬的定時器id。

抽象出來的簡單版刷新數據，5秒后取消刷新。

let intervalId = nullfunction init() { this.refresh()}function refresh() { intervalId = setTimeout(() => { this.getRefreshData() }, 2000);}function getRefreshData() { console.log(’start get data.....’, intervalId) setTimeout(() => { console.log(’get data.....’) this.refresh() }, 100); }function stopRefresh() { console.log(’stop....’, intervalId) clearInterval(intervalId)}this.init()setTimeout(() => { this.stopRefresh()}, 5000);

以上這篇vue路由切換時取消之前的所有請求操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。