页面切换中断ajax,Vue切换页面时中断axios请求

需求分析

当切换页面时，由于上一页面请求执行时间长，切换到该页面时，还未执行完，这时那个请求仍会继续执行直到请求结束，此时将会影响页面性能，并且可能对现在页面的数据显示造成一定影响，所以我们应该，切换页面前中断前面所有请求。

在项目中经常有一些场景会连续发送多个请求，而异步会导致最后得到的结果不是我们想要的，并且对性能也有非常大的影响。例如一个搜索框，每输入一个字符都要发送一次请求，但输入过快的时候其实前面的请求并没有必要真的发送出去，这时候就需要在发送新请求的时候直接取消上一次请求。

具体操作

在main.js里写一个全局httpRequestList的空数组，用来装我们的cancel函数：

// cancelToken中的cancel函数

Vue.$httpRequestList=[];

在封装的Axios请求里面，将cancel函数推入httpRequestList数组：

Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的。

// 在请求拦截器里面 统一添加 取消请求

request.interceptors.request.use(config => {

// 强行中断请求要用到的，记录请求信息

config['cancelToken'] = new CancelToken(function executor(cancel) {

Vue.$httpRequestList.push(cancel) //存储cancle

})

config.headers = { ...config.headers, ...config.config.headers }

... ...

return config;

});

// response拦截器

// 在响应拦截器里面 统一添加 处理取消请求

request.interceptors.response.use(response => {

... ...

}, error => {

if(error.message === 'interrupt') {

console.log('请求中断');

return new Promise(() => {});

}

// Vue.$httpRequestList = [];

return Promise.reject(error)

});

在路由守卫中，写一个执行cancel方法的clearHttpRequestingList方法，在每次跳转之前执行clearHttpRequestingList()函数

/**

* 在路由切换之前检测来中断上个页面的请求

*/

router.beforeEach((to, from, next) => {

clearHttpRequestingList();

next();

});

// 清空cancelToken中的cancel函数

function clearHttpRequestingList() {

// 路由切换检测是否强行中断， 强行中断时才向下执行

if (Vue.$httpRequestList.length > 0) {

Vue.$httpRequestList.forEach((item) => {

// 给个标志，中断请求

item('interrupt');

})

Vue.$httpRequestList = [];

}

}

vuex管理使用

export default createStore({

state: {

httpRequestList: [],

},

mutations: {

addHttpRequestList(state, payload) {

if (payload == 0) {

//强行中断时才向下执行

state.httpRequestList.forEach(item => {

item("interrupt"); //给个标志，中断请求

});

state.httpRequestList = [];

} else {

state.httpRequestList.push(payload);

}

},

},

actions: {

async removeHttpRequestList(ctx) {

ctx.commit("addHttpRequestList", 0);

},

},

modules: {},

});

import store from '@/store';

// 在请求拦截器里面 统一添加 取消请求

request.interceptors.request.use(config => {

// 请求配置

config.cancelToken = new CancelToken(c => {

//强行中断请求要用到的

store.commit("addHttpRequestList", c);

});

... ...

return config;

});

import store from '@/store';

// 调用

router.beforeEach((to, from, next) => {

store.dispatch('removeHttpRequestList');

next();

});