vue路由切换时取消之前的所有请求操作路由切换时取消之前的所有请求操作
主要介绍了vue路由切换时取消之前的所有请求操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小
编过来看看吧
在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;
评论0