✨ init Project

src/utils/request.js

@@ -0,0 +1,172 @@
+import axios from 'axios' // 引入axios
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useUserStore } from '@/pinia/modules/user'
+import router from '@/router/index'
+import { ElLoading } from 'element-plus'
+
+const service = axios.create({
+  baseURL: import.meta.env.VITE_BASE_API,
+  timeout: 99999
+})
+let activeAxios = 0
+let timer
+let loadingInstance
+const showLoading = (
+  option = {
+    target: null
+  }
+) => {
+  const loadDom = document.getElementById('gva-base-load-dom')
+  activeAxios++
+  if (timer) {
+    clearTimeout(timer)
+  }
+  timer = setTimeout(() => {
+    if (activeAxios > 0) {
+      if (!option.target) option.target = loadDom
+      loadingInstance = ElLoading.service(option)
+    }
+  }, 400)
+}
+
+const closeLoading = () => {
+  activeAxios--
+  if (activeAxios <= 0) {
+    clearTimeout(timer)
+    loadingInstance && loadingInstance.close()
+  }
+}
+// http request 拦截器
+service.interceptors.request.use(
+  (config) => {
+    if (!config.donNotShowLoading) {
+      showLoading(config.loadingOption)
+    }
+    const userStore = useUserStore()
+    config.headers = {
+      'Content-Type': 'application/json',
+      'x-token': userStore.token,
+      'x-user-id': userStore.userInfo.ID,
+      ...config.headers
+    }
+    return config
+  },
+  (error) => {
+    if (!error.config.donNotShowLoading) {
+      closeLoading()
+    }
+    ElMessage({
+      showClose: true,
+      message: error,
+      type: 'error'
+    })
+    return error
+  }
+)
+
+// http response 拦截器
+service.interceptors.response.use(
+  (response) => {
+    const userStore = useUserStore()
+    if (!response.config.donNotShowLoading) {
+      closeLoading()
+    }
+    if (response.headers['new-token']) {
+      userStore.setToken(response.headers['new-token'])
+    }
+    if (response.data.code === 0 || response.headers.success === 'true') {
+      if (response.headers.msg) {
+        response.data.msg = decodeURI(response.headers.msg)
+      }
+      return response.data
+    } else {
+      ElMessage({
+        showClose: true,
+        message: response.data.msg || decodeURI(response.headers.msg),
+        type: 'error'
+      })
+      return response.data.msg ? response.data : response
+    }
+  },
+  (error) => {
+    if (!error.config.donNotShowLoading) {
+      closeLoading()
+    }
+
+    if (!error.response) {
+      ElMessageBox.confirm(
+        `
+        <p>检测到请求错误</p>
+        <p>${error}</p>
+        `,
+        '请求报错',
+        {
+          dangerouslyUseHTMLString: true,
+          distinguishCancelAndClose: true,
+          confirmButtonText: '稍后重试',
+          cancelButtonText: '取消'
+        }
+      )
+      return
+    }
+
+    switch (error.response.status) {
+      case 500:
+        ElMessageBox.confirm(
+          `
+        <p>检测到接口错误${error}</p>
+        <p>错误码<span style="color:red"> 500 </span>：此类错误内容常见于后台panic，请先查看后台日志，如果影响您正常使用可强制登出清理缓存</p>
+        `,
+          '接口报错',
+          {
+            dangerouslyUseHTMLString: true,
+            distinguishCancelAndClose: true,
+            confirmButtonText: '清理缓存',
+            cancelButtonText: '取消'
+          }
+        ).then(() => {
+          const userStore = useUserStore()
+          userStore.ClearStorage()
+          router.push({ name: 'Login', replace: true })
+        })
+        break
+      case 404:
+        ElMessageBox.confirm(
+          `
+          <p>检测到接口错误${error}</p>
+          <p>错误码<span style="color:red"> 404 </span>：此类错误多为接口未注册（或未重启）或者请求路径（方法）与api路径（方法）不符--如果为自动化代码请检查是否存在空格</p>
+          `,
+          '接口报错',
+          {
+            dangerouslyUseHTMLString: true,
+            distinguishCancelAndClose: true,
+            confirmButtonText: '我知道了',
+            cancelButtonText: '取消'
+          }
+        )
+        break
+      case 401:
+        ElMessageBox.confirm(
+          `
+          <p>无效的令牌</p>
+          <p>错误码:<span style="color:red"> 401 </span>错误信息:${error}</p>
+          `,
+          '身份信息',
+          {
+            dangerouslyUseHTMLString: true,
+            distinguishCancelAndClose: true,
+            confirmButtonText: '重新登录',
+            cancelButtonText: '取消'
+          }
+        ).then(() => {
+          const userStore = useUserStore()
+          userStore.ClearStorage()
+          router.push({ name: 'Login', replace: true })
+        })
+        break
+    }
+
+    return error
+  }
+)
+export default service