diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 19a7d214cc..aeb4046729 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -173,6 +173,10 @@ export default {
     }
   },
   created() {
+    // 取消视图请求
+    this.$cancelRequest('/chart/view/getData/**')
+    this.$cancelRequest('/api/link/viewDetail/**')
+    this.$cancelRequest('/static-resource/**')
   },
   computed: {
     mainActiveName() {
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 0bd473aca9..de2901acca 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -118,6 +118,20 @@ Vue.prototype.checkPermission = function(pers) {
   return hasPermission
 }
 Vue.use(deWebsocket)
+
+Vue.prototype.$currentHttpRequestList = new Map()
+Vue.prototype.$cancelRequest = function(cancelkey) {
+  if (cancelkey) {
+    if (cancelkey.indexOf('/**') > -1) {
+      Vue.prototype.$currentHttpRequestList.forEach((item, key) => {
+        key.indexOf(cancelkey.split('/**')[0]) > -1 && item('Operation canceled by the user.')
+      })
+    } else {
+      Vue.prototype.$currentHttpRequestList.get(cancelkey) && Vue.prototype.$currentHttpRequestList.get(cancelkey)('Operation canceled by the user.')
+    }
+  }
+}
+
 new Vue({
 
   router,
diff --git a/frontend/src/utils/request.js b/frontend/src/utils/request.js
index dc79cca838..05a275a803 100644
--- a/frontend/src/utils/request.js
+++ b/frontend/src/utils/request.js
@@ -6,6 +6,7 @@ import Config from '@/settings'
 import i18n from '@/lang'
 import { tryShowLoading, tryHideLoading } from './loading'
 import { getLinkToken, setLinkToken } from '@/utils/auth'
+import Vue from 'vue'
 
 const TokenKey = Config.TokenKey
 const RefreshTokenKey = Config.RefreshTokenKey
@@ -49,6 +50,7 @@ let service = axios.create({
 // request interceptor
 service.interceptors.request.use(
   config => {
+    const CancelToken = axios.CancelToken
     const idToken = getIdToken()
     if (idToken) {
       config.headers[Config.IdTokenKey] = idToken
@@ -72,6 +74,10 @@ service.interceptors.request.use(
     }
     config.loading && tryShowLoading(store.getters.currentPath)
 
+    config.cancelToken = new CancelToken(function executor(c) {
+      Vue.prototype.$currentHttpRequestList.set(config.url, c)
+    })
+
     return config
   },
   error => {
@@ -91,6 +97,7 @@ service.setTimeOut = time => {
 service.interceptors.response.use(response => {
   response.config.loading && tryHideLoading(store.getters.currentPath)
   checkAuth(response)
+  Vue.prototype.$currentHttpRequestList.delete(response.config.url)
   return response.data
 }, error => {
   const config = error.response && error.response.config || error.config