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

通常情況下，介面返回資料很快，但萬事無絕對
若介面返回資料較慢此時使用者快速切換選單，那麼上個路由的請求還處在傳送中，為了處理效率，對請求做些處理

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