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()
})
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 个人数据保全计划:从印象笔记迁移到joplin
· Vue3.5常用特性整理
· 重拾 SSH:从基础到安全加固
· 为什么UNIX使用init进程启动其他进程?