添加切换页面取消未完成请求

src/main.js

@@ -4,7 +4,7 @@ import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/icon.css";
 import "element-ui/lib/theme-chalk/notification.css";
 import "element-ui/lib/theme-chalk/loading.css";
-import axios from "@utils/axios";
+import axios from "@/plugin/axios";
 import VueAxios from "vue-axios";
 import router from "./router";
 import i18n from "./i18n";

src/plugin/axios/index.js

@@ -0,0 +1,26 @@
+import axios from "axios";
+import store from '@/store'
+
+// 创建一个 axios 实例
+const service = axios.create({
+    baseURL: process.env.VUE_APP_API ? process.env.VUE_APP_API : "",
+    //   timeout: 30000,
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+    config => {
+        // 在发送请求设置cancel token
+        config.cancelToken = new axios.CancelToken(cancel => {
+            store.dispatch("acrou/cancelToken/push", cancel)
+        })
+        return config
+    },
+    error => {
+        // 发送失败
+        console.log(error)
+        return Promise.reject(error)
+    }
+)
+
+export default service;

src/router/index.js

@@ -3,6 +3,7 @@ import febAlive from "feb-alive";
 import VueRouter from "vue-router";
 // 路由数据
 import routes from "./routes";
+import store from '@/store/index';
 
 // 在router实例化之前重写history
 febAlive.resetHistory();
@@ -22,16 +23,16 @@ Vue.use(VueRouter);
 // 导出路由 在 main.js 里使用
 const router = new VueRouter({
   mode: "history",
-  scrollBehavior(to, from, savePosition) {
-    if (savePosition) {
-      return savePosition;
-    } else {
-      return {
-        x: 0,
-        y: 0,
-      };
-    }
-  },
+  // scrollBehavior(to, from, savePosition) {
+  //   if (savePosition) {
+  //     return savePosition;
+  //   } else {
+  //     return {
+  //       x: 0,
+  //       y: 0,
+  //     };
+  //   }
+  // },
   routes,
 });
 
@@ -46,6 +47,7 @@ router.beforeEach(async (to, from, next) => {
     console.log("before:");
     console.log(to, from);
   }
+  store.dispatch("acrou/cancelToken/cancel")
   next();
 });
 

src/store/modules/acrou/modules/cancelToken.js

@@ -0,0 +1,36 @@
+export default {
+    namespaced: true,
+    state: {
+        cancelToken: [],
+    },
+    actions: {
+        push({
+            commit
+        }, cancelToken) {
+            return new Promise(resolve => {
+                commit("push", cancelToken);
+                resolve()
+            })
+        },
+        cancel({
+            commit
+        }) {
+            return new Promise(resolve => {
+                commit("clear");
+                resolve()
+            })
+        },
+    },
+    mutations: {
+        push(state, cancelToken) {
+            state.cancelToken.push(cancelToken)
+        },
+        clear(state) {
+            console.log(state.cancelToken)
+            state.cancelToken.forEach(cancel => {
+                cancel('路由跳转取消请求');
+            });
+            state.cancelToken = [];
+        }
+    },
+};

src/utils/AcrouUtil.js

@@ -1,4 +1,4 @@
-import axios from "@utils/axios";
+import axios from "@/plugin/axios";
 let Base64 = require("js-base64").Base64;
 
 const text_exts = [

src/utils/axios.js

@@ -1,9 +0,0 @@
-import axios from "axios";
-
-// 创建一个 axios 实例
-const service = axios.create({
-  baseURL: process.env.VUE_APP_API ? process.env.VUE_APP_API : "",
-//   timeout: 30000,
-});
-
-export default service;

src/views/page/GoList.vue

@@ -1,7 +1,13 @@
 <template>
   <div>
     <headmd :option="headmd" v-if="renderHeadMD && headmd.display"></headmd>
-    <div class="golist">
+    <div
+      class="golist"
+      v-loading="loading"
+      v-infinite-scroll="pageLoad"
+      infinite-scroll-disabled="busy"
+      infinite-scroll-distance="10"
+    >
       <list-view
         :data="files"
         v-if="mode === 'list'"
@@ -17,18 +23,13 @@
         :action="action"
         :thum="thum"
       />
-      <infinite-loading
-        :identifier="infiniteId"
-        @infinite="infiniteHandler"
-      ></infinite-loading>
-      <div
-        v-show="files.length === 0"
-        class="has-text-centered no-content"
-      ></div>
+      <!-- <infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading> -->
+      <div v-show="files.length === 0" class="has-text-centered no-content"></div>
       <center>
-        <!-- <span v-if="page.page_token === null && files.length !== 0" class="tag">
-          {{ $t("list.total") }} {{ files.length }} {{ $t("list.item") }}
-        </span>-->
+        <div :class="!busy ? 'is-hidden' : ''">
+          <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
+          <span class="sr-only">Loading...</span>
+        </div>
       </center>
     </div>
     <div
@@ -37,10 +38,7 @@
         $t('list.total') + ' ' + files.length + ' ' + $t('list.item')
       "
     ></div>
-    <readmemd
-      :option="readmemd"
-      v-if="renderReadMeMD && readmemd.display"
-    ></readmemd>
+    <readmemd :option="readmemd" v-if="renderReadMeMD && readmemd.display"></readmemd>
 
     <viewer
       v-if="viewer && images && images.length > 0"
@@ -70,7 +68,6 @@ import {
   checkView,
   checkExtends,
 } from "@utils/AcrouUtil";
-import axios from "@/utils/axios";
 import { mapState } from "vuex";
 import InfiniteLoading from "vue-infinite-loading";
 import ListView from "./components/list";
@@ -88,6 +85,8 @@ export default {
   data: function () {
     return {
       infiniteId: +new Date(),
+      busy: false,
+      loading: true,
       page: {
         page_token: null,
         page_index: 0,
@@ -137,14 +136,28 @@ export default {
       return window.themeOptions.render.readme_md || false;
     },
   },
+  created () {
+    this.render();
+  },
   methods: {
+    pageLoad () {
+      if (!this.page.page_token) return;
+      this.page.page_index++;
+      console.log("滚动加载了", this.page.page_index, this.$route.path);
+      this.render("scroll");
+    },
     infiniteHandler ($state) {
       // TODO 异步请求的原因，导致数据响应在下个页面。需要终止上次请求
       this.page.page_index++;
       console.log("滚动加载了", this.page.page_index, this.$route.path);
       this.render($state);
     },
-    render($state) {
+    render (scroll) {
+      if (scroll) {
+        this.busy = true;
+      } else {
+        this.loading = true;
+      }
       this.headmd = { display: false, file: {}, path: "" };
       this.readmemd = { display: false, file: {}, path: "" };
       var path = this.$route.path;
@@ -180,14 +193,18 @@ export default {
               this.renderMd(data.files, path);
             }
           }
-          if (body.nextPageToken) {
-            $state.loaded();
-          } else {
-            $state.complete();
-          }
+          // if (body.nextPageToken) {
+          //   $state.loaded();
+          // } else {
+          //   $state.complete();
+          // }
+          this.loading = false;
+          this.busy = false;
         })
         .catch((e) => {
-          $state.loaded();
+          // $state.loaded();
+          this.loading = false;
+          this.busy = false;
           console.log(e);
         });
     },
@@ -320,7 +337,7 @@ export default {
     goSearchResult (file, target) {
       this.loading = true;
       let id = this.$route.params.id;
-      axios
+      this.axios
         .post(`/${id}:id2path`, { id: file.id })
         .then((res) => {
           this.loading = false;