refactor: 重构axios封装

src/utils/http/index.js

@@ -1,13 +1,17 @@
 import axios from 'axios'
-import { setupInterceptor } from './interceptors'
+import { repReject, repResolve, reqReject, reqResolve } from './interceptors'
 
-function createAxios(option = {}) {
+export function createAxios(options = {}) {
-  const defBaseURL = window.__APP__GLOB__CONF__?.VITE_APP_GLOB_BASE_API || import.meta.env.VITE_APP_GLOB_BASE_API
+  const defaultOptions = {
+    baseURL: window.__APP__GLOB__CONF__?.VITE_APP_GLOB_BASE_API || import.meta.env.VITE_APP_GLOB_BASE_API,
+    timeout: 12000,
+  }
   const service = axios.create({
-    timeout: option.timeout || 120000,
+    ...defaultOptions,
-    baseURL: option.baseURL || defBaseURL,
+    ...options,
   })
-  setupInterceptor(service)
+  service.interceptors.request.use(reqResolve, reqReject)
+  service.interceptors.response.use(repResolve, repReject)
   return service
 }
 

src/utils/http/interceptors.js

@@ -1,82 +1,80 @@
 import { router } from '@/router'
 import { getToken, removeToken } from '@/utils/token'
+import { isNullOrUndef } from '../is'
 import { isWithoutToken } from './helpers'
 
-export function setupInterceptor(service) {
+export function reqResolve(config) {
-  service.interceptors.request.use(
+  // 防止缓存，给get请求加上时间戳
-    async (config) => {
+  if (config.method === 'get') {
-      // 防止缓存，给get请求加上时间戳
+    config.params = { ...config.params, t: new Date().getTime() }
-      if (config.method === 'get') {
+  }
-        config.params = { ...config.params, t: new Date().getTime() }
-      }
 
-      // 处理不需要token的请求
+  // 处理不需要token的请求
-      if (isWithoutToken(config)) {
+  if (isWithoutToken(config)) {
-        return config
+    return config
-      }
+  }
 
-      const token = getToken()
+  const token = getToken()
-      if (token) {
+  if (token) {
-        /**
+    /**
-         * * jwt token
+     * * jwt token
-         * ! 认证方案: Bearer
+     * ! 认证方案: Bearer
-         */
+     */
-        if (!config.headers.Authorization) config.headers.Authorization = 'Bearer ' + token
+    if (!config.headers.Authorization) config.headers.Authorization = 'Bearer ' + token
 
-        return config
+    return config
-      }
+  }
-      /**
+  /**
-       * * 未登录或者token过期的情况下
+   * * 未登录或者token过期的情况下
-       * * 跳转登录页重新登录，携带当前路由及参数，登录成功会回到原来的页面
+   * * 跳转登录页重新登录，携带当前路由及参数，登录成功会回到原来的页面
-       */
+   */
+  const { currentRoute } = router
+  router.replace({
+    path: '/login',
+    query: { ...currentRoute.query, redirect: currentRoute.path },
+  })
+  return Promise.reject({ code: '-1', message: '未登录' })
+}
+
+export function reqReject(error) {
+  return Promise.reject(error)
+}
+
+export function repResolve(response) {
+  return response?.data
+}
+
+export function repReject(error) {
+  let { code, message } = error.response?.data || {}
+  if (isNullOrUndef(code)) {
+    // 未知错误
+    console.error('【err】' + error)
+    return Promise.reject({ code: -1, message: '接口异常！', error })
+  }
+  /**
+   * TODO 此处可以根据后端返回的错误码自定义框架层面的错误处理
+   */
+  switch (code) {
+    case 401:
+      message = message || '未登录'
+      // * 处理未登录的情况
+      removeToken()
       const { currentRoute } = router
       router.replace({
         path: '/login',
         query: { ...currentRoute.query, redirect: currentRoute.path },
       })
-      return Promise.reject({ code: '-1', message: '未登录' })
+      break
-    },
+    case 403:
-    (error) => Promise.reject(error)
+      message = message || '没有权限'
-  )
+      // TODO 处理没有权限的情况
-
+      break
-  service.interceptors.response.use(
+    case 404:
-    (response) => response?.data,
+      message = message || '资源或接口不存在'
-    (error) => {
+      // TODO 处理资源或接口不存在的情况
-      let { code, message } = error.response?.data
+      break
-      return Promise.reject({ code, message })
+    default:
-
+      break
-      /**
+  }
-       * TODO 此处可以根据后端返回的错误码自定义框架层面的错误处理
+  return Promise.resolve({ code, message })
-       */
-      switch (code) {
-        case 401:
-          // 未登录（可能是token过期或者无效了）
-          console.error(message)
-          removeToken()
-          const { currentRoute } = router
-          router.replace({
-            path: '/login',
-            query: { ...currentRoute.query, redirect: currentRoute.path },
-          })
-          break
-        case 403:
-          // 没有权限
-          console.error(message)
-          break
-        case 404:
-          // 资源不存在
-          console.error(message)
-          break
-        default:
-          break
-      }
-      // 已知错误resolve，在业务代码中作提醒，未知错误reject，捕获错误统一提示接口异常（9000以上为业务类型错误，需要跟后端确定好）
-      if ([401, 403, 404].includes(code) || code >= 9000) {
-        return Promise.resolve({ code, message })
-      } else {
-        console.error('【err】' + error)
-        return Promise.reject({ message: '接口异常，请稍后重试！' })
-      }
-    }
-  )
 }