axios cancel request vue-router

api.js

import axios from 'axios'
/** @type {import('axios').CancelTokenSource) | null } */
export let cancelTokenSource = null
export function setCancelTokenSource (source) {
  cancelTokenSource = source
}

axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    config.cancelToken = cancelTokenSource ? cancelTokenSource.token : null
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    if (axios.isCancel(error)) {
      return Promise.reject(error)
    }
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

router.js

import axios from 'axios'
import { cancelTokenSource, setCancelTokenSource } from './api.js'
import Router from 'vue-router'

const router = new Router({
//...
})

router.beforeEach(async (to, form, next) => {
  if (cancelTokenSource) {
    cancelTokenSource.cancel('cancel request before each route')
  }

  setCancelTokenSource(axios.CancelToken.source())
  
  next()
}