切换路由时中止未返回数据的请求

切换路由页面时，中止上个路由页面未返回数据的请求

通常情况下，接口返回数据很快，但万事无绝对
若接口返回数据较慢此时用户快速切换菜单，那么上个路由的请求还处在发送中，为了处理效率，对请求做些处理

vue 项目使用 axios 封装请求，此处要用到 axios 中的 CancelToken
在封装好的请求文件(request.js)中，加入以下内容

/** ...省略的代码 */
const clearRequest = {
    source: {
        token: null,
        cancel: null
    }
}
const cancelToken = axios.CancelToken
const source = cancelToken.source()
// 创建 axios 实例
const service = axios.create({
    cancelToken: source.token,
    baseURL: process.env.BASE_API,
    timeout: 6000   // 请求超时时间
})
// request 拦截器
service.interceptors.request.use(
    config => {
        /** ...省略的代码 */
        config.cancelToken = clearRequest.source.token
        return config
    },
    error => {
        /** ...省略的代码 */
        Promise.reject(error)
    }
)
/** ...省略的代码 */
export {clearRequest}

修改路由配置，每次路由变化前执行 cancel 方法，并更新 cancelToken

import {clearRequest} from '@/utils/request'
import axios from 'axios'
/** ...省略的代码 */
router.beforeEach((to, from, next) => {
  /** ...省略的代码 */
  // 切换路由时清空上个路由未完成的所有请求
  const cancelToken = axios.CancelToken
  clearRequest.source.cancel && clearRequest.source.cancel()
  clearRequest.source = cancelToken.source()
  /** ...省略的代码 */
}