axios 中断请求

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