Vue项目优化之axios的cancelToken实战

·  阅读 2680

当我们在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()
})复制代码

配置基本就是这样的,在项目中已经实际应用过,如有不当,欢迎指正


分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改