封装请求增加取消请求方法

src/utils/globalCancelToken.js

@@ -0,0 +1,29 @@
+// 最新的一个请求
+let cancel = null
+
+// 所有请求
+let cancelTokenList = []
+
+function setToken(cancelToken) {
+  cancel = cancelToken
+  cancelTokenList.push(cancelToken)
+}
+
+function cancelToken() {
+  cancel && cancel()
+  cancelTokenList.pop()
+}
+
+function clearAllToken() {
+  while (cancelTokenList.length > 0) {
+    let cancel = cancelTokenList.pop()
+    console.log(cancel, 'cancel')
+    cancel && cancel()
+  }
+}
+
+export {
+  setToken,
+  cancelToken,
+  clearAllToken,
+}

src/utils/request.js

@@ -5,7 +5,7 @@ import store from '../store'
 import { getToken } from '@/utils/auth'
 import Config from '@/settings'
 import Cookies from 'js-cookie'
-
+import { setToken } from '@/utils/globalCancelToken.js'
 // 创建axios实例
 const service = axios.create({
   // baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/',
@@ -23,6 +23,8 @@ service.interceptors.request.use(
     config.headers['loginName'] = 'admin'
     config.headers['token'] = 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyVHlwZSI6Ik1HIiwiZXhwIjoxNjkwMTgwNzE2LCJ1c2VySWQiOiIyNDQiLCJpYXQiOjE2ODg3MDk0ODcsImxvZ2luTmFtZSI6ImFkbWluIn0.lqxxvv2-FcecQngMBorz4MpkB3mIJQDG-IUULQyV-KQ'
     config.headers["userId"] = '244'
+    // 添加可取消请求配置
+    config.cancelToken = new axios.CancelToken(c => setToken(c))
     return config
   },
   error => {
@@ -37,6 +39,15 @@ service.interceptors.response.use(
   },
   error => {
     console.log(error);
+    if (axios.isCancel(error)) {
+      console.log('请求已取消')
+      Notification.error({
+        title: '请求已取消',
+        duration: 5000
+      })
+      return Promise.reject('请求已取消')
+    }
+
     // 兼容blob下载出错json提示
     if (error.response.data instanceof Blob && error.response.data.type.toLowerCase().indexOf('json') !== -1) {
       const reader = new FileReader()