添加网络请求的进度条和缓存

src/plugins/axiosApp.js

@@ -1,5 +1,7 @@
 import Vue from "vue";
 import axios from "axios";
+import { loadProgressBar } from "./axiosProgress";
+import cachingGet from "./axiosCache";
 import router from "../router";
 import { getKeyToken, removeKeyToken } from "../auth/auth";
 
@@ -105,6 +107,9 @@ _axiosApp.interceptors.response.use(
   }
 );
 
+_axiosApp.get = cachingGet(_axiosApp.get, []);
+loadProgressBar(_axiosApp);
+
 Plugin.install = function(Vue) {
   Vue.$http = _axiosApp;
   Object.defineProperties(Vue.prototype, {

src/plugins/axiosCache.js

@@ -0,0 +1,30 @@
+export default function(get, regexes) {
+  // cachingGet
+  const cache = new Map();
+
+  return function cachedGet(url) {
+    const key = url;
+
+    if (regexes.some(regex => url.match(regex))) {
+      if (cache.has(key)) {
+        const request = cache.get(key);
+        // console.log("cache.get(key):" + request.then(v => console.log(v)));
+        return request;
+      } else {
+        const request = get(...arguments);
+        return request.then(v => {
+          if (v.status === 200) {
+            // 如果能取到数据，才缓存
+            cache.set(key, request);
+          }
+          return request;
+        });
+
+        // return request;
+      }
+    } else {
+      const request = get(...arguments);
+      return request;
+    }
+  };
+}

src/plugins/axiosCommonService.js

@@ -1,5 +1,7 @@
 import Vue from "vue";
 import axios from "axios";
+import { loadProgressBar } from "./axiosProgress";
+import cachingGet from "./axiosCache";
 import router from "../router";
 import { getKeyToken, removeKeyToken } from "../auth/auth";
 
@@ -105,6 +107,9 @@ _axiosCommonService.interceptors.response.use(
   }
 );
 
+_axiosCommonService.get = cachingGet(_axiosCommonService.get, []);
+loadProgressBar(_axiosCommonService);
+
 Plugin.install = function(Vue) {
   Vue.$httpCommonService = _axiosCommonService;
   Object.defineProperties(Vue.prototype, {

src/plugins/axiosProgress.js

@@ -0,0 +1,46 @@
+import iView from "iview";
+import axios from "axios";
+
+const calculatePercentage = (loaded, total) => Math.floor(loaded * 1.0) / total;
+
+export function loadProgressBar(instance = axios) {
+  let requestsCounter = 0;
+
+  const setupStartProgress = () => {
+    instance.interceptors.request.use(config => {
+      requestsCounter++;
+      iView.LoadingBar.start();
+      return config;
+    });
+  };
+
+  const setupUpdateProgress = () => {
+    const update = e =>
+      iView.LoadingBar.update(calculatePercentage(e.loaded, e.total));
+    instance.defaults.onDownloadProgress = update;
+    instance.defaults.onUploadProgress = update;
+  };
+
+  const setupStopProgress = () => {
+    const responseFunc = response => {
+      if (--requestsCounter === 0) {
+        iView.LoadingBar.finish();
+      }
+      return response;
+    };
+
+    const errorFunc = error => {
+      if (--requestsCounter === 0) {
+        iView.LoadingBar.error();
+      }
+      console.log(error);
+      throw error;
+    };
+
+    instance.interceptors.response.use(responseFunc, errorFunc);
+  };
+
+  setupStartProgress();
+  setupUpdateProgress();
+  setupStopProgress();
+}