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