1、中断上一个重复的请求

src/utils/request.js

@@ -22,9 +22,63 @@ const service = axios.create({
   timeout: 60 * 60 * 1000
 })
 
+
+// 正在进行中的请求列表
+let reqList = [];
+let count = 0; // 请求接口计数器
+/**
+ * 阻止重复请求
+ * @param {array} reqList - 请求缓存列表
+ * @param {string} url - 当前请求地址
+ * @param {function} cancel - 请求中断函数
+ * @param {string} errorMessage - 请求中断时需要显示的错误信息
+ */
+const stopRepeatRequest = function (reqList, url, cancel, errorMessage) {
+  const errorMsg = errorMessage || ''
+  for (let i = 0; i < reqList.length; i++) {
+    if (reqList[i].url === url) {
+      // reqList[i].cancel(errorMsg); // 中断上一个重复请求
+      reqList[i].cancel(); // 中断上一个重复请求
+      reqList.splice(i, 1); // 删除上一个重复请求
+      reqList.push({ // 存储新的请求
+        url,
+        cancel
+      })
+      return
+    }
+  }
+  reqList.push({
+    url,
+    cancel
+  })
+}
+
+/**
+ * 允许某个请求可以继续进行
+ * @param {array} reqList 全部请求列表
+ * @param {string} url 请求地址
+ */
+const allowRequest = function (reqList, url) {
+  for (let i = 0; i < reqList.length; i++) {
+    if (reqList[i] === url) {
+      reqList.splice(i, 1)
+      break
+    }
+  }
+}
+
 // request拦截器
 service.interceptors.request.use(config => {
-  Vue.prototype.$layer.loading({content:'请稍等!'});
+  let cancel = null;
+  // 设置cancelToken对象
+  config.cancelToken = new axios.CancelToken(function (c) {
+    cancel = c
+  })
+  // 阻止重复请求。当上个请求未完成时，相同的请求不会进行
+  stopRepeatRequest(reqList, config.url, cancel, `${config.url} 请求被中断`)
+  // ++count;
+
+  Vue.prototype.$layer.loading({ content: '请稍等!' });
   // 是否需要设置 token
   const isToken = (config.headers || {}).isToken === false
   // 是否需要防止数据重复提交
@@ -63,46 +117,50 @@ service.interceptors.request.use(config => {
     config.params = {};
     config.url = url;
   }
-	if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-		const requestObj = {
-			url: config.url,
-			data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
-			time: new Date().getTime()
-		}
-		const sessionObj = cache.session.getJSON('sessionObj')
-		if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-			cache.session.setJSON('sessionObj', requestObj)
-		} else {
-			cache.session.setJSON('sessionObj', requestObj)
-		}
-	}
+  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+    const requestObj = {
+      url: config.url,
+      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+      time: new Date().getTime()
+    }
+    const sessionObj = cache.session.getJSON('sessionObj')
+    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+      cache.session.setJSON('sessionObj', requestObj)
+    } else {
+      cache.session.setJSON('sessionObj', requestObj)
+    }
+  }
   return config
 }, error => {
-    console.log(error)
-    Promise.reject(error)
+  console.log(error)
+  Promise.reject(error)
 })
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-     setTimeout(() => {
-  	    Vue.prototype.$layer.closeAll('loading');
-     }, 500);
-    // 未设置状态码则默认成功状态
-    const code = res.data.code || 200;
-    // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
-    // 二进制数据则直接返回
-    if(res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer'){
-      return res.data
-    }
-    if (code === 401) {
-      if (!isRelogin.show) {
-        isRelogin.show = true;
-        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
-          confirmButtonText: '重新登录',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }
+  setTimeout(() => {
+    Vue.prototype.$layer.closeAll('loading');
+  }, 500);
+  // --count;
+  // if (count === 0) {
+  //   Vue.prototype.$layer.closeAll('loading');
+  // }
+  // 未设置状态码则默认成功状态
+  const code = res.data.code || 200;
+  // 获取错误信息
+  const msg = errorCode[code] || res.data.msg || errorCode['default']
+  // 二进制数据则直接返回
+  if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+    return res.data
+  }
+  if (code === 401) {
+    if (!isRelogin.show) {
+      isRelogin.show = true;
+      MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+        confirmButtonText: '重新登录',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
       ).then(() => {
         isRelogin.show = false;
         store.dispatch('LogOut').then(() => {
@@ -112,26 +170,26 @@ service.interceptors.response.use(res => {
         isRelogin.show = false;
       });
     }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
-    } else if (code === 500) {
-      Message({
-        message: msg,
-        type: 'error'
-      })
-      return Promise.reject(new Error(msg))
-    } else if (code !== 200) {
-      Notification.error({
-        title: msg
-      })
-      return Promise.reject('error')
-    } else {
-      return res.data
-    }
-  },
+    return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+  } else if (code === 500) {
+    Message({
+      message: msg,
+      type: 'error'
+    })
+    return Promise.reject(new Error(msg))
+  } else if (code !== 200) {
+    Notification.error({
+      title: msg
+    })
+    return Promise.reject('error')
+  } else {
+    return res.data
+  }
+},
   error => {
     console.log('err' + error)
     setTimeout(() => {
-       Vue.prototype.$layer.closeAll('loading');
+      Vue.prototype.$layer.closeAll('loading');
     }, 500);
     let { message } = error;
     if (message == "Network Error") {