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()
})

 

posted @   未几  阅读(3878)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
阅读排行:
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 个人数据保全计划:从印象笔记迁移到joplin
· Vue3.5常用特性整理
· 重拾 SSH:从基础到安全加固
· 为什么UNIX使用init进程启动其他进程?
点击右上角即可分享
微信分享提示