切換路由時中止未返回數據的請求

切換路由頁面時，中止上個路由頁面未返回數據的請求

通常情況下，接口返回數據很快，但萬事無絕對
若接口返回數據較慢此時用戶快速切換菜單，那么上個路由的請求還處在發送中，為了處理效率，對請求做些處理

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()
  /** ...省略的代碼 */
}