image.png
在经常的开发过程中, 我们需要在tab切换的时候, 调用接口
如果用户经常互切,会导致network 发起很多的请求,影响性能.
所以就要使用 axios中断请求
我们在axios封装的时候, 添加代码
// 全局变量
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
let cancel;
// params 是 axios的参数对象
let params = {
baseURL: 'XXX',
timeout: 120000,
method: options.type || 'get',
headers: options.headers,
xhrFields: options.xhrFields || {},
responseType: options.responseType || '',
}
params.cancelToken = new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
});
axios(params).then({
// 写自己的拦截处理等
})
.catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
console.log('error', thrown);
});
关闭请求
function cancelAjax() {
console.log('结束请求', source);
cancel('Operation canceled by the user.');
};
在tab 切换click 事件的时候, 调用 cancelAjax 的方法, 可以中断请求
只有最后一个请求返回数据
如果有兄弟组件之间有数据关联, 不适合这样做.
还有一种情况是, 每个页面都要请求至少3-4 个接口. 但是切换的时候, 只有一个或几个接口中断, 其他的继续请求.
就要自定义
cancelToken
