fix: 请求失败处理

src/axios/checkStatus.ts

@@ -0,0 +1,41 @@
+/**
+ * @description: 校验网络请求状态码
+ * @param {Number} status
+ * @return void
+ */
+export const checkStatus = (status: number) => {
+  switch (status) {
+    case 400:
+      ElMessage.error('请求失败！请您稍后重试')
+      break
+    case 401:
+      ElMessage.error('登录失效！请您重新登录')
+      break
+    case 403:
+      ElMessage.error('当前账号无权限访问！')
+      break
+    case 404:
+      ElMessage.error('你所访问的资源不存在！')
+      break
+    case 405:
+      ElMessage.error('请求方式错误！请您稍后重试')
+      break
+    case 408:
+      ElMessage.error('请求超时！请您稍后重试')
+      break
+    case 500:
+      ElMessage.error('服务异常！')
+      break
+    case 502:
+      ElMessage.error('网关错误！')
+      break
+    case 503:
+      ElMessage.error('服务不可用！')
+      break
+    case 504:
+      ElMessage.error('网关超时！')
+      break
+    default:
+      ElMessage.error('请求失败！')
+  }
+}

src/axios/config.ts

@@ -1,6 +1,8 @@
 import type { InternalAxiosRequestConfig, AxiosResponse } from 'axios'
 import { ResultEnum } from '@/enums/HttpEnum'
 import { useUserStoreWithOut } from '@/stores'
+import router from '@/router'
+import { LOGIN_URL } from '@/constants'
 const defaultRequestInterceptors = (config: InternalAxiosRequestConfig) => {
   const userStore = useUserStoreWithOut()
   if (config.headers && typeof config.headers.set === 'function') {
@@ -11,6 +13,7 @@ const defaultRequestInterceptors = (config: InternalAxiosRequestConfig) => {
 
 const defaultResponseInterceptors = (response: AxiosResponse) => {
   const { code, msg } = response.data
+  const userStore = useUserStoreWithOut()
   if (response?.config?.responseType === 'blob') {
     // 如果是文件流，直接过
     return response
@@ -19,6 +22,11 @@ const defaultResponseInterceptors = (response: AxiosResponse) => {
   } else if (code === ResultEnum.FORBIDDEN) {
     ElMessage.error('无权限')
     return response.data
+  } else if (code === ResultEnum.OVERDUE) {
+    userStore.setToken('')
+    router.replace(LOGIN_URL)
+    ElMessage.error(msg)
+    return response.data
   } else {
     console.error(msg)
     ElMessage.error(msg)

src/axios/service.ts

@@ -1,6 +1,8 @@
 import axios, { AxiosError, type AxiosInstance, type AxiosRequestConfig, type AxiosResponse, type InternalAxiosRequestConfig } from 'axios'
 import { ResultEnum } from '@/enums/HttpEnum'
 import { defaultRequestInterceptors, defaultResponseInterceptors } from './config'
+import { checkStatus } from './checkStatus'
+import router from '@/router'
 interface RequestInterceptors<T> {
   // 请求拦截
   requestInterceptors?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig
@@ -44,8 +46,14 @@ axiosInstance.interceptors.response.use(
     return res
   },
   (error: AxiosError) => {
-    ElMessage.error('服务未连接!')
-    console.error('response.use： ' + error)
+    const { response } = error
+    // 请求超时 && 网络错误单独判断，没有 response
+    if (error.message.indexOf('timeout') !== -1) ElMessage.error('请求超时！请您稍后重试')
+    if (error.message.indexOf('Network Error') !== -1) ElMessage.error('网络错误！请您稍后重试')
+    // 根据服务器响应的错误状态码，做不同的处理
+    if (response) checkStatus(response.status)
+    // 服务器结果都没有返回(可能服务器错误可能客户端断网)，断网处理:可以跳转到断网页面
+    if (!window.navigator.onLine) router.replace('/500')
     return Promise.reject(error)
   }
 )