改成自己的router，基本完成网络通信

src/helper/alert.js

@@ -0,0 +1,45 @@
+import Swal from 'sweetalert2';
+
+const SelfSwal = Swal.mixin({
+  customClass: {
+    confirmButton: 'btn-round-full-single',
+    cancelButton: 'btn-round-full-single',
+  },
+  buttonsStyling: false,
+  heightAuto: false
+});
+
+// ajax
+export const success = content => {
+  return SelfSwal.fire({
+    html: content,
+    showConfirmButton: false,
+    timer: 1000,
+    icon: 'success'
+  });
+}
+export const failed = (content, afterRetry) => {
+  return afterRetry ?
+    SelfSwal.fire({
+      html: content,
+      showCancelButton: true,
+      confirmButtonText: '重试',
+      cancelButtonText: '放弃'
+    })
+    .then(result => result.isConfirmed ? afterRetry() : null) :
+    SelfSwal.fire({
+      html: content,
+      showConfirmButton: false,
+      timer: 1000,
+      icon: 'error'
+    })
+    .then(() => null);
+}
+
+export const alert = (content) => {
+  return SelfSwal.fire({
+    html: content,
+    confirmButtonText: '了解',
+    icon: 'warning'
+  });
+}

src/helper/axios.js

@@ -1,18 +1,62 @@
 import axios from 'axios';
+import { failed } from './alert';
 
 export function get(url) {
-  return axios.get(url, {
-    headers: {
-      Authorization: 'Bearer ' + localStorage.getItem('jwt'),
-      "Allow-Control-Allow-Origin": "*"
-    }
-  });
+  return send(
+    axios.get(url, {
+      headers: {
+        Authorization: 'Bearer ' + localStorage.getItem('jwt'),
+        "Allow-Control-Allow-Origin": "*"
+      }
+    }),
+    () => get(url)
+  );
 }
 export function post(url, data) {
-  return axios.post(url, data, {
-    headers: {
-      Authorization: 'Bearer ' + localStorage.getItem('jwt'),
-      "Allow-Control-Allow-Origin": "*"
-    }
-  });
+  return send(
+    axios.post(url, data, {
+      headers: {
+        Authorization: 'Bearer ' + localStorage.getItem('jwt'),
+        "Allow-Control-Allow-Origin": "*"
+      }
+    }),
+    () => post(url, data)
+  );
+}
+
+const waitToSend = [];
+
+async function send(xhr, retryFunc) {
+  if (waitToSend.length) {
+    waitToSend.push(retryFunc);
+    return;
+  }
+  try {
+    const { data } = await xhr;
+    return {
+      ...data,
+      networkStatus: 200
+    };
+  }
+  catch (err) {
+    const failData = {
+      networkStatus: err?.response?.status ?? -1,
+      status: false
+    };
+    waitToSend.push(retryFunc);
+    if (err.message === 'Network Error')
+      return await failed('您的设备似乎断网了，请检查网络后重试或刷新', flushWaitList) || failData;
+    else if (err?.response?.status === 401)
+      window.history.replaceState({}, '', '#/login');
+    else if (err?.response?.status === 504)
+      return await failed('请求超时，请耐心等待几秒后重试或刷新', flushWaitList) || failData;
+    else
+      return await failed('服务器出现问题，请稍后重试或刷新', flushWaitList) || failData;
+    return failData;
+  }
+}
+
+function flushWaitList() {
+  waitToSend.forEach(retryFunc => retryFunc());
+  waitToSend.splice(0, waitToSend.length);
 }

src/helper/history.js

@@ -0,0 +1,98 @@
+const listeners = [];
+const statics = {
+  nowDepth: null,
+  forceURL: null
+};
+
+export default class History {
+  static push(url, state) {
+    // console.log('href: push', url, 'over', this.getHref());
+    if (url === this.getHref() || this.getHref() === '/forceback') {
+      // console.log('href: push ignored.');
+      return;
+    }
+    window.history.pushState({state, depth: ++statics.nowDepth}, null, '#' + url);
+    listeners.forEach(fn => fn());
+  }
+  static replace(url, state) {
+    // console.log('href: substitute', url, 'for', this.getHref());
+    if (url === this.getHref() || this.getHref() === '/forceback') {
+      // console.log('href: replace ignored.');
+      return;
+    }
+    window.history.replaceState({state, depth: statics.nowDepth}, null, '#' + url);
+    listeners.forEach(fn => fn());
+  }
+  static force(url) {
+    // console.log('href: force', this.getHref(), 'to', url);
+    if (url === this.getHref()) return;
+    const depth = window.history.state?.depth || 0;
+    if (depth) {
+      this.go(-depth);
+      statics.forceURL = url;
+    }
+    else
+      this.replace(url);
+  }
+
+  static listen(listener) {
+    listeners.push(listener);
+    return () => {
+      for (let i in listeners)
+        if (listeners[i] === listener)
+          listeners.splice(i, 1);
+    };
+  }
+  static go(d) {
+    window.history.go(d);
+    // console.log("go", d);
+  }
+  static back() {
+    if (statics.nowDepth === 0)
+      this.replace('/');
+    else
+      window.history.back();
+    // console.log("goback")
+  }
+  static forward() {
+    window.history.forward();
+    // console.log("goforward")
+  }
+
+  static getLocation() {
+    return document.location;
+  }
+  static getHref() {
+    return document.location.href.match(/#[^#]*$/)?.[0]?.replace('#', '') ?? '/';
+  }
+  static getId() {
+    return this.getHref().match(/[\d]*$/)?.[0] ?? null;
+  }
+
+  static init(pageChangeHandler) {
+    if (statics.nowDepth != null) return;
+    statics.nowDepth = window.history.state?.depth || 0;
+    window.addEventListener('hashchange', () => {
+      // console.log('href: hash changed to:', this.getHref());
+      listeners.forEach(fn => fn());
+    });
+    return this.listen(() => {
+      const depth = window.history.state?.depth || 0;
+      if (depth > statics.nowDepth) {
+        this.go(statics.nowDepth - depth);
+        return;
+      }
+      else
+        statics.nowDepth = depth;
+      if (statics.forceURL) {
+        const replaceURL = statics.forceURL;
+        statics.forceURL = null;
+        this.replace(replaceURL);
+      }
+      else {
+        // 触发换页
+        pageChangeHandler()
+      }
+    });
+  }
+};