axios 之cancelToken原理以及使用 取消上一次请求
当我们在vue项目中切换频繁切换路由时,当上一个路由尚未有响应时,会对当前路由的页面信息渲染产生一定影响,对我们的性能会造成一定影响。因此,我们要做的就是在路由切换时取消上一路由未响应的请求,从而提高性能。
我先讲一下是如何实现的。(原理有时间再补上)
1、在项目中创建一个cancelToken.js文件,定义一个全局变量
class cancelClass {
static cancelRequest = {
source: {
token:null,
cancel:null
}
}}
export default cancelClass复制代码
2、在自己项目二次封装的axios拦截器中添加cancelToken配置
import axios from 'axios'
import cancelClass from './cancelToken'
const service = axios.create({
baseURL:process.env.BASE_API,
timeout:5000
})
service.interceptors.request.use(config=>{
config.cancelToken = cancelClass.cancelRequest.source.token;
return config
},error=>{
console.log(error)
Promise.reject(error)
})
……复制代码
3、在main.js中添加路由拦截
import axios from 'axios'
router.beforeEach((to, from, next) => {
const CancelToken = axios.CancelToken;
cancelClass.cancelRequest.source.cancel&&cancelClass.cancelRequest.source.cancel('请求取消');
cancelClass.cancelRequest.source = axios.CancelToken.source();
next()
})