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