improve network utils

src/main.js

@@ -4,8 +4,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 // import "./registerServiceWorker";
-// import "./plugins/axiosCommonService";
-// import "./plugins/axiosApp";
+import "./plugins/axiosIndex";
 import "./plugins/customComponents";
 import "./filters";
 import "./mixins/logout";

src/plugins/axiosApp.js

@@ -5,15 +5,15 @@ import cachingGet from "./axiosCache";
 import { getKeyToken, removeKeyToken } from "../auth/auth";
 
 // Full config:  https://github.com/axios/axios#request-config
-// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
+// axios.defaults.baseURL = process.env.BASE_URL || process.env.apiUrl || '';
 // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
-// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
-let config = {
+const config = {
   // baseURL: process.env.baseURL || process.env.apiUrl || ""
   timeout: 60 * 1000, // Timeout
   withCredentials: true, // Check cross-site Access-Control
 };
+const cacheGetUrls = [];
 
 const _axiosApp = axios.create(config);
 
@@ -118,7 +118,7 @@ _axiosApp.interceptors.response.use(
   }
 );
 
-_axiosApp.get = cachingGet(_axiosApp.get, []);
+_axiosApp.get = cachingGet(_axiosApp.get, cacheGetUrls);
 loadProgressBar(_axiosApp);
 
 Plugin.install = function(Vue) {

src/plugins/axiosCommonService.js

@@ -1,117 +0,0 @@
-import Vue from "vue";
-import { Notice } from "iview";
-import axios from "axios";
-import { loadProgressBar } from "./axiosProgress";
-import cachingGet from "./axiosCache";
-import { getKeyToken, removeKeyToken } from "../auth/auth";
-
-// Full config:  https://github.com/axios/axios#request-config
-// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
-// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
-// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
-axios.defaults.headers.post["Access-Control-Allow-Origin"] = "*";
-
-let config = {
-  // baseURL: process.env.baseURL || process.env.apiUrl || ""
-  timeout: 60 * 1000, // Timeout
-  withCredentials: true, // Check cross-site Access-Control
-};
-
-const _axiosCommonService = axios.create(config);
-
-/**
- * B. new token lifecycle
- * 1. 任何接口地址都尝试加上 key & token (第三方请求，单独做新的$http)
- * 2. 如果没有 key & token，就当做这是无需认证的api
- * 3. 做好token失效的处理，在interceptors.response 统一删除
- * 4. key & token 由外部管理，不在此插件管理。一般是在登录成功后设置。
- * xx. 额外：通过js-cookie将key等存入cookie
- */
-
-_axiosCommonService.interceptors.request.use(
-  function(config) {
-    if (config.url.endsWith("Login") === false) {
-      const [wk_token, wk_key] = getKeyToken();
-      if (wk_token) {
-        config.headers.common["token"] = wk_token;
-        config.headers.common["key"] = wk_key;
-      }
-    }
-    return config;
-  },
-  function(error) {
-    // Do something with request error
-    Notice.error({
-      title: error,
-    });
-    return Promise.reject(error);
-  }
-);
-
-// Add a response interceptor
-_axiosCommonService.interceptors.response.use(
-  response => {
-    return response;
-  },
-  error => {
-    if (!error.response) {
-      // "Network Error" 网络不通，直接返回
-
-      Notice.error({
-        title: "网络连接异常，请检查网络设置。",
-      });
-      return Promise.reject(error);
-    }
-    // 这里是返回状态码不为200时候的错误处理
-    let status = error.response.status;
-
-    // 登录失效 跳转登录页面
-    if (status == 403 || status == 401) {
-      Notice.warning({
-        title: "登录失效,请重新登录！",
-      });
-      removeKeyToken();
-      return Promise.reject(error);
-    } else if (status == 405) {
-      Notice.warning({
-        title: "没有权限！",
-      });
-      return Promise.reject(error);
-    }
-
-    if (status != 200) {
-      const data = error.response.data;
-      if (data && data.desc) {
-        Notice.error({
-          title: "服务器返回",
-          desc: data.desc,
-        });
-      } else {
-        Notice.error({
-          title: "未定义异常: ",
-          desc: JSON.stringify(data, 2),
-        });
-      }
-      return Promise.reject(error);
-    }
-  }
-);
-
-_axiosCommonService.get = cachingGet(_axiosCommonService.get, []);
-loadProgressBar(_axiosCommonService);
-
-Plugin.install = function(Vue) {
-  Object.defineProperties(Vue.prototype, {
-    $httpCommonService: {
-      get() {
-        return _axiosCommonService;
-      },
-    },
-  });
-};
-
-Vue.use(Plugin);
-
-export default Plugin;
-
-export const httpCommonService = _axiosCommonService;

src/plugins/axiosIndex.js

@@ -0,0 +1,2 @@
+import "./axiosApp";
+import "./axiosNoAuth";

src/plugins/axiosNoAuth.js

@@ -0,0 +1,84 @@
+import Vue from "vue";
+import axios from "axios";
+import { loadProgressBar } from "axios-progress-bar";
+import cachingGet from "./axiosCache";
+
+const config = {
+  timeout: 60 * 1000, // Timeout
+};
+const cacheGetUrls = [];
+
+const _axiosNoAuth = axios.create(config);
+
+/**
+ * 本应用的无auth api，或者第三方的api
+ * 1. 统一使用的http api，方便使用，无需fetch
+ * 2. 无默认headers
+ */
+
+_axiosNoAuth.interceptors.request.use(
+  function(config) {
+    return config;
+  },
+  function(error) {
+    Vue.prototype.$notify({
+      showClose: true,
+      message: error,
+      type: "error",
+    });
+    return Promise.reject(error);
+  }
+);
+
+// Add a response interceptor
+_axiosNoAuth.interceptors.response.use(
+  response => {
+    return response;
+  },
+  error => {
+    if (!error.response) {
+      // "Network Error" 网络不通，直接返回
+      Vue.prototype.$notify({
+        showClose: true,
+        message: "网络连接异常，请检查网络设置。",
+        type: "error",
+      });
+      return Promise.reject(error);
+    }
+
+    const data = error.response.data;
+    if (data && data.desc) {
+      Vue.prototype.$notify({
+        showClose: true,
+        message: data.desc,
+        type: "error",
+      });
+    } else {
+      Vue.prototype.$notify({
+        showClose: true,
+        message: `异常(${error.response.status}): ${error.config.url}`,
+        type: "error",
+      });
+    }
+    return Promise.reject(error);
+  }
+);
+
+_axiosNoAuth.get = cachingGet(_axiosNoAuth.get, cacheGetUrls);
+loadProgressBar(_axiosNoAuth);
+
+Plugin.install = function(Vue) {
+  Object.defineProperties(Vue.prototype, {
+    $httpNoAuth: {
+      get() {
+        return _axiosNoAuth;
+      },
+    },
+  });
+};
+
+Vue.use(Plugin);
+
+export default Plugin;
+
+export const httpNoAuth = _axiosNoAuth;