feat: remove axios

2025-04-05 19:41:59 +08:00 · 2024-03-16 00:10:19 +08:00 · 2024-03-16 00:10:19 +08:00 · 9b3e3d2113
commit 9b3e3d2113
parent 76f15c8d5a
22 changed files with 282 additions and 527 deletions
--- a/.env
+++ b/.env
@ -2,7 +2,6 @@
 VITE_BASE_URL=/
 # 项目名称
 VITE_APP_NAME=Nova - Admin
-
 # 路由模式
 VITE_ROUTE_MODE = web
 # 权限路由模式: static ｜ dynamic
--- a/README.md
+++ b/README.md
@ -21,7 +21,7 @@
 ## features

 - **Latest popular technology stack** - Developed based on the latest technology stack such as Vue3, Vite, TypeScript, NaiveUI, Pinia, etc
- **Network request function encapsulation** - Perfect axios encapsulation and configuration, unified response processing and multi-scenario capability
+- **Network request function encapsulation** - Based on [alova](https://alova.js.org/) encapsulation and configuration, unified response processing and multi-scenario capabilities
 - **Authority Control** - Perfect front and back-end authority management solution
 - **Routing system** - Supports local static and dynamic routing
 - **Component packaging** - Secondary packaging of components with high frequency of daily use to meet basic workrequirements
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -21,7 +21,7 @@
 ## 特性

 - **最新流行技术栈** - 基于Vue3、Vite、TypeScript、NaiveUI、Pinia等最新技术栈开发
- **网络请求功能封装** - 完善的axios封装和配置，统一的响应处理和多场景能力
+- **网络请求功能封装** - 基于[alova](https://alova.js.org/)封装和配置，统一的响应处理和多场景能力
 - **权限控制** - 完善的前后端权限管理方案
 - **路由系统** - 支持本地静态路由和动态路由
 - **组件封装** - 对日常使用频率较高的组件二次封装,满足基础工作需求
--- a/package.json
+++ b/package.json
@ -37,22 +37,22 @@
    "UnoCSS"
  ],
  "scripts": {
-    "dev": "vite --mode dev",
+    "dev": "vite --mode dev --port 9980",
    "dev:test": "vite --mode test",
    "dev:prod": "vite --mode prod",
    "build": "vue-tsc --noEmit && vite build --mode prod",
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    "build:test": "vue-tsc --noEmit && vite build --mode test",
-    "preview": "vite preview",
+    "preview": "vite preview --port 9981",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "sizecheck": "npx vite-bundle-visualizer"
  },
  "dependencies": {
+    "@alova/scene-vue": "^1.4.5",
    "@tinymce/tinymce-vue": "^5.1.1",
    "@vueuse/core": "^10.9.0",
    "alova": "^2.17.1",
-    "axios": "^1.6.7",
    "crypto-js": "^4.2.0",
    "echarts": "^5.5.0",
    "md-editor-v3": "^4.11.3",
--- a/src/config/index.ts
+++ b/src/config/index.ts
@ -1,4 +1,3 @@
 export * from './sdk'
-export * from './service'
 export * from './env'
 export * from './system'
--- a/src/config/service.ts
+++ b/src/config/service.ts
@ -1,59 +0,0 @@
-/** 默认实例的Aixos配置 */
-import type { AxiosRequestConfig } from 'axios'
-
-export const DEFAULT_AXIOS_OPTIONS: AxiosRequestConfig = {
-  // 请求超时时间,默认15秒
-  timeout: 15 * 1000,
-}
-
-/** 默认实例的后端字段配置 */
-export const DEFAULT_BACKEND_OPTIONS = {
-  codeKey: 'code',
-  dataKey: 'data',
-  msgKey: 'msg',
-  successCode: 200,
-}
-
-/** 错误信息的显示时间 */
-export const ERROR_MSG_DURATION = 3 * 1000
-
-/** 默认的请求错误code */
-export const DEFAULT_REQUEST_ERROR_CODE = 'DEFAULT'
-
-/** 默认的请求错误文本 */
-export const DEFAULT_REQUEST_ERROR_MSG = '请求错误~'
-
-/** 请求超时的错误code */
-export const REQUEST_TIMEOUT_CODE = 'TIME_OUT'
-
-/** 请求超时的错误文本 */
-export const REQUEST_TIMEOUT_MSG = '请求超时~'
-
-/** 默认的请求错误code */
-export const NETWORK_ERROR_CODE = 'NETWORK_ERROR'
-
-/** 默认的请求错误文本 */
-export const NETWORK_ERROR_MSG = '网络错误'
-
-/** 请求不成功各种状态的错误 */
-export const ERROR_STATUS = {
-  400: '400: 请求出现语法错误~',
-  401: '401: 用户未授权~',
-  403: '403: 服务器拒绝访问~',
-  404: '404: 请求的资源不存在~',
-  405: '405: 请求方法未允许~',
-  408: '408: 网络请求超时~',
-  500: '500: 服务器内部错误~',
-  501: '501: 服务器未实现请求功能~',
-  502: '502: 错误网关~',
-  503: '503: 服务不可用~',
-  504: '504: 网关超时~',
-  505: '505: http版本不支持该请求~',
-  [DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG,
-}
-
-/** token刷新的code */
-export const REFRESH_TOKEN_CODE = [888, 999]
-
-/** 没有错误提示的code */
-export const ERROR_NO_TIP_STATUS = [10000]
--- a/src/layouts/components/header/Github.vue
+++ b/src/layouts/components/header/Github.vue
@ -2,7 +2,7 @@
 import HeaderButton from '../common/HeaderButton.vue'

 function toMyGithub() {
-  window.open('https://github.com/iam-see')
+  window.open('https://github.com/chansee97')
 }
 </script>

--- a/src/service/api/list.ts
+++ b/src/service/api/list.ts
--- a/src/service/api/login.ts
+++ b/src/service/api/login.ts
@ -9,7 +9,11 @@ export function fetchLogin(params: Ilogin) {
  return alovaInstance.Post<any>('/login', params)
 }
 export function fetchUpdateToken(params: any) {
-  return alovaInstance.Post<ApiAuth.loginToken>('/updateToken', params)
+  const method = alovaInstance.Post<ApiAuth.loginToken>('/updateToken', params)
+  method.meta = {
+    authRole: 'refreshToken',
+  }
+  return method
 }
 export function fetchUserInfo(params: any) {
  return alovaInstance.Get<Auth.UserInfo>('/getUserInfo', { params })
--- a/src/service/api/test.ts
+++ b/src/service/api/test.ts
@ -1,16 +1,17 @@
 import qs from 'qs'
-import { alovaInstance } from '../http'
+import { alovaInstance, blankInstance } from '../http'

 /* get方法测试 */
 export function fetachGet(params?: any) {
  return alovaInstance.Get('/getAPI', { params })
 }
+
 /* post方法测试 */
-export function fetachPost(data: any) {
+export function fetchPost(data: any) {
  return alovaInstance.Post('/postAPI', data)
 }
 /* formPost方法测试 */
-export function fetachFormPost(data: any) {
+export function fetchFormPost(data: any) {
  return alovaInstance.Post('/postAPI', qs.stringify(data), {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
@ -18,23 +19,54 @@ export function fetachFormPost(data: any) {
  })
 }
 /* delete方法测试 */
-export function fetachDelete() {
+export function fetchDelete() {
  return alovaInstance.Delete('/deleteAPI')
 }
 /* put方法测试 */
-export function fetachPut(data: any) {
+export function fetchPut(data: any) {
  return alovaInstance.Put('/putAPI', data)
 }
-
+/* 不携带token的接口 */
+export function withoutToken() {
+  const methodInstance = alovaInstance.Get('/getAPI')
+  methodInstance.meta = {
+    authRole: null,
+  }
+  return methodInstance
+}
+/* 接口数据转换 */
+export function dictData() {
+  return alovaInstance.Get('/getDictData', {
+    transformData(rawData, _headers) {
+      const { data } = rawData as any
+      return {
+        gender: data.gender === 0 ? '男' : '女',
+        status: `状态是${data.status}`,
+      }
+    },
+  })
+}
+/* 模拟获取二进制文件 */
+export function getBlob() {
+  const methodInstance = blankInstance.Get('https://images.unsplash.com/photo-1663529628961-80aa6ebcd157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80')
+  methodInstance.meta = {
+    isDownload: true,
+  }
+  return methodInstance
+}
 /* 测试状态码500失败 */
-export function testFailedRequest() {
+export function FailedRequest() {
  return alovaInstance.Get('/serverError')
 }

 /* 测试业务码500失败 */
-export function testFailedResponse() {
+export function FailedResponse() {
  return alovaInstance.Post('/businessError')
 }
+/* 测试业务码10000失败,无提示 */
+export function FailedResponseWithoutTip() {
+  return alovaInstance.Post('/businessErrorWithoutTip')
+}
 /* token失效的接口 */
 export function expiredTokenRequest() {
  return alovaInstance.Get('/expiredToken')
--- a/src/service/http/alova.ts
+++ b/src/service/http/alova.ts
@ -1,7 +1,7 @@
-import type { Method } from 'alova'
 import { createAlova } from 'alova'
 import VueHook from 'alova/vue'
 import GlobalFetch from 'alova/GlobalFetch'
+import { createServerTokenAuthentication } from '@alova/scene-vue'
 import {
  handleBusinessError,
  handleRefreshToken,
@ -11,22 +11,31 @@ import {
 import {
  DEFAULT_ALOVA_OPTIONS,
  DEFAULT_BACKEND_OPTIONS,
-  REFRESH_TOKEN_CODE,
 } from './config'
 import { local } from '@/utils'

-// docs path of alova.js https://alova.js.org/
-/**
- * 前端alova的配置
- */
-interface AlovaConfig {
-  baseURL: string
-  timeout?: number
-  beforeRequest?: (method: Method<globalThis.Ref<unknown>>) => void
-}
+const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication({
+  // 服务端判定token过期
+  refreshTokenOnSuccess: {
+    // 当服务端返回401时，表示token过期
+    isExpired: (response, _method) => {
+      return response.status === 401
+    },

+    // 当token过期时触发，在此函数中触发刷新token
+    handler: async (_response, _method) => {
+      await handleRefreshToken()
+    },
+  },
+  // 添加token到请求头
+  assignToken: (method) => {
+    method.config.headers.Authorization = `Bearer ${local.get('token')}`
+  },
+})
+
+// docs path of alova.js https://alova.js.org/
 export function createAlovaInstance(
-  alovaConfig: AlovaConfig,
+  alovaConfig: Service.AlovaConfig,
  backendConfig?: Service.BackendConfig,
 ) {
  const _backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig }
@ -39,30 +48,25 @@ export function createAlovaInstance(
    baseURL: _alovaConfig.baseURL,
    timeout: _alovaConfig.timeout,

-    beforeRequest(method) {
-      // 添加token到请求头
-      method.config.headers.token = `Bearer ${local.get('token')}`
+    beforeRequest: onAuthRequired((method) => {
      alovaConfig.beforeRequest?.(method)
-    },
-
-    responded: {
-    // 请求成功的拦截器
+    }),
+    responded: onResponseRefreshToken({
+      // 请求成功的拦截器
      onSuccess: async (response, method) => {
        const { status } = response

        if (status === 200) {
-        // 获取返回的数据
+          // 返回blob数据
+          if (method.meta?.isDownload)
+            return response.blob()
+
+          // 返回json数据
          const apiData = await response.json()
          // 请求成功
          if (apiData[_backendConfig.codeKey] === _backendConfig.successCode)
            return handleServiceResult(apiData.data, null)

-          // token失效, 刷新token
-          if (REFRESH_TOKEN_CODE.includes(apiData[_backendConfig.codeKey])) {
-            await handleRefreshToken()
-            method.send()
-          }
-
          // 业务请求失败
          const errorResult = handleBusinessError(apiData, _backendConfig)
          return handleServiceResult(null, errorResult)
@ -71,13 +75,14 @@ export function createAlovaInstance(
        const errorResult = handleResponseError(response)
        return handleServiceResult(null, errorResult)
      },
-      onError: (error, _method) => {
-        console.warn('🚀 ~ error:', error)
+      onError: (error, method) => {
+        const tip = `[${method.type}] - [${method.url}] - ${error.message}`
+        window.$message?.warning(tip)
      },

      onComplete: async (_method) => {
        // 处理请求完成逻辑
      },
-    },
+    }),
  })
 }
--- a/src/service/http/config.ts
+++ b/src/service/http/config.ts
@ -1,11 +1,5 @@
 /** 默认实例的Aixos配置 */
-import type { AxiosRequestConfig } from 'axios'
-
-export const DEFAULT_AXIOS_OPTIONS: AxiosRequestConfig = {
-  // 请求超时时间,默认15秒
-  timeout: 15 * 1000,
-}
-export const DEFAULT_ALOVA_OPTIONS: AxiosRequestConfig = {
+export const DEFAULT_ALOVA_OPTIONS = {
  // 请求超时时间,默认15秒
  timeout: 15 * 1000,
 }
@ -18,29 +12,9 @@ export const DEFAULT_BACKEND_OPTIONS = {
  successCode: 200,
 }

-/** 错误信息的显示时间 */
-export const ERROR_MSG_DURATION = 3 * 1000
-
-/** 默认的请求错误code */
-export const DEFAULT_REQUEST_ERROR_CODE = 'DEFAULT'
-
-/** 默认的请求错误文本 */
-export const DEFAULT_REQUEST_ERROR_MSG = '请求错误~'
-
-/** 请求超时的错误code */
-export const REQUEST_TIMEOUT_CODE = 'TIME_OUT'
-
-/** 请求超时的错误文本 */
-export const REQUEST_TIMEOUT_MSG = '请求超时~'
-
-/** 默认的请求错误code */
-export const NETWORK_ERROR_CODE = 'NETWORK_ERROR'
-
-/** 默认的请求错误文本 */
-export const NETWORK_ERROR_MSG = '网络错误'
-
 /** 请求不成功各种状态的错误 */
 export const ERROR_STATUS = {
+  0: '请求错误~',
  400: '400: 请求出现语法错误~',
  401: '401: 用户未授权~',
  403: '403: 服务器拒绝访问~',
@ -53,11 +27,7 @@ export const ERROR_STATUS = {
  503: '503: 服务不可用~',
  504: '504: 网关超时~',
  505: '505: http版本不支持该请求~',
-  [DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG,
 }

-/** token刷新的code */
-export const REFRESH_TOKEN_CODE = [888, 999]
-
 /** 没有错误提示的code */
 export const ERROR_NO_TIP_STATUS = [10000]
--- a/src/service/http/handle.ts
+++ b/src/service/http/handle.ts
@ -1,13 +1,6 @@
-import type { AxiosError } from 'axios'
 import { showError } from './utils'
 import {
-  DEFAULT_REQUEST_ERROR_CODE,
-  DEFAULT_REQUEST_ERROR_MSG,
  ERROR_STATUS,
-  NETWORK_ERROR_CODE,
-  NETWORK_ERROR_MSG,
-  REQUEST_TIMEOUT_CODE,
-  REQUEST_TIMEOUT_MSG,
 } from './config'
 import { useAuthStore } from '@/store'
 import { fetchUpdateToken } from '@/service'
@ -16,61 +9,19 @@ import { local } from '@/utils'
 type ErrorStatus = keyof typeof ERROR_STATUS

 /**
- * @description: 处理axios或http错误
- * @param {AxiosError} err
- * @return {*}
- */
-export function handleFontEndError(err: AxiosError) {
-  const error: Service.RequestError = {
-    type: 'Alova',
-    code: DEFAULT_REQUEST_ERROR_CODE,
-    msg: DEFAULT_REQUEST_ERROR_MSG,
-  }
-  // 网络错误
-  if (!window.navigator.onLine || err.message === 'Network Error')
-    Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG })
-
-  // 超时错误
-  if (err.code === REQUEST_TIMEOUT_CODE && err.message.includes('timeout')) {
-    Object.assign(error, {
-      code: REQUEST_TIMEOUT_CODE,
-      msg: REQUEST_TIMEOUT_MSG,
-    })
-  }
-  // 请求错误
-  if (err.response) {
-    const errorCode: ErrorStatus = (err.response?.status as ErrorStatus) || 'DEFAULT'
-    const msg = ERROR_STATUS[errorCode]
-    Object.assign(error, { code: errorCode, msg })
-  }
-
-  showError(error)
-
-  return error
-}
-
-/**
- * @description: 处理axios请求成功，但返回后端服务器报错
- * @param {AxiosResponse} response
+ * @description: 处理请求成功，但返回后端服务器报错
+ * @param {Response} response
 * @return {*}
 */
 export function handleResponseError(response: Response) {
  const error: Service.RequestError = {
-    type: 'Axios',
-    code: DEFAULT_REQUEST_ERROR_CODE,
-    msg: DEFAULT_REQUEST_ERROR_MSG,
-  }
-
-  if (!window.navigator.onLine) {
-    // 网路错误
-    Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG })
-  }
-  else {
-    // 请求成功的状态码非200的错误
-    const errorCode: ErrorStatus = response.status as ErrorStatus
-    const msg = ERROR_STATUS[errorCode] || DEFAULT_REQUEST_ERROR_MSG
-    Object.assign(error, { type: 'Response', code: errorCode, msg })
+    type: 'Response',
+    code: 0,
+    msg: ERROR_STATUS[0],
  }
+  const errorCode: ErrorStatus = response.status as ErrorStatus
+  const msg = ERROR_STATUS[errorCode] || ERROR_STATUS[0]
+  Object.assign(error, { code: errorCode, msg })

  showError(error)

@ -80,10 +31,10 @@ export function handleResponseError(response: Response) {
 /**
 * @description:
 * @param {Record} data 接口返回的后台数据
- * @param {Service} config axios字段配置
+ * @param {Service} config 后台字段配置
 * @return {*}
 */
-export function handleBusinessError(data: Record<string, any>, config: Service.BackendConfig) {
+export function handleBusinessError(data: Record<string, any>, config: Required<Service.BackendConfig>) {
  const { codeKey, msgKey } = config
  const error: Service.RequestError = {
    type: 'Business',
@ -123,14 +74,13 @@ export function handleServiceResult<T = any>(data: any, error: Service.RequestEr
 */
 export async function handleRefreshToken() {
  const authStore = useAuthStore()
-  const refreshToken = local.get('refreshToken')
-  const { data } = await fetchUpdateToken(refreshToken)
+  const data = await fetchUpdateToken({ refreshToken: local.get('refreshToken') })
  if (data) {
    local.set('token', data.accessToken)
    local.set('refreshToken', data.refreshToken)
  }
  else {
-    // 刷新失败，推出
+    // 刷新失败，退出
    await authStore.resetAuthStore()
  }
 }
--- a/src/service/http/index.ts
+++ b/src/service/http/index.ts
@ -1,4 +1,3 @@
-import { createRequest } from './request'
 import { createAlovaInstance } from './alova'
 import { proxyConfig } from '@/config'

@ -6,17 +5,16 @@ const { url, urlPattern } = proxyConfig[import.meta.env.MODE]

 const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y' || false

-export const request = createRequest({
+export const request = createAlovaInstance({
  baseURL: isHttpProxy ? urlPattern : url,
 }, {
-  msgKey: 'message',
-})
-
-// export const secondRequest = createRequest({ baseURL: isHttpProxy ? secondUrlPattern : secondUrl });
-export const mockRequest = createRequest({ baseURL: 'https://mock.apifox.com/m1/4071143-0-default' }, {
-  msgKey: 'message',
+  msgKey: 'msg',
 })

 export const alovaInstance = createAlovaInstance({
  baseURL: 'https://mock.apifox.com/m1/4071143-0-default',
 })
+
+export const blankInstance = createAlovaInstance({
+  baseURL: '',
+})
--- a/src/service/http/instance.ts
+++ b/src/service/http/instance.ts
@ -1,87 +0,0 @@
-import axios from 'axios'
-import type { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios'
-import {
-  handleBusinessError,
-  handleFontEndError,
-  handleRefreshToken,
-  handleResponseError,
-  handleServiceResult,
-} from './handle'
-import { clearInvalidParameters, transformRequestData } from './utils'
-import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS, REFRESH_TOKEN_CODE } from './config'
-import { local } from '@/utils'
-
-/**
- * @description: 封装axios请求类
- */
-export default class CreateAxiosInstance {
-  // axios 实例
-  instance: AxiosInstance
-  // 后台字段配置
-  backendConfig: Service.BackendConfig
-  // 基础配置
-  axiosConfig: AxiosRequestConfig = {}
-
-  constructor(axiosConfig: AxiosRequestConfig, backendConfig: Partial<Service.BackendConfig> = DEFAULT_BACKEND_OPTIONS) {
-    // 设置了axios实例上的一些默认配置,新配置会覆盖默认配置
-    this.backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig }
-    this.instance = axios.create({ ...DEFAULT_AXIOS_OPTIONS, ...axiosConfig })
-    this.setInterceptor()
-  }
-
-  // 设置类拦截器的函数
-  setInterceptor() {
-    this.instance.interceptors.request.use(
-      async (config) => {
-        const handleConfig = { ...config }
-        if (handleConfig.headers) {
-          // 清除无效字段
-          handleConfig.data = clearInvalidParameters(handleConfig.data)
-          // 数据格式转换
-          const contentType = handleConfig.headers.getContentType() as unknown as UnionKey.ContentType
-          if (contentType)
-            handleConfig.data = await transformRequestData(handleConfig.data, contentType)
-
-          // 设置token
-          handleConfig.headers.setAuthorization(`Bearer ${local.get('token') || ''}`)
-        }
-        return handleConfig
-      },
-      (error: AxiosError) => {
-        const errorResult = handleFontEndError(error)
-        return handleServiceResult(null, errorResult)
-      },
-    )
-    this.instance.interceptors.response.use(
-      async (response): Promise<any> => {
-        const { status } = response
-        if (status === 200) {
-          // 获取返回的数据
-          const apiData = response.data
-          const { codeKey, successCode, dataKey } = this.backendConfig
-          // 请求成功
-          if (apiData[codeKey] === successCode)
-            return handleServiceResult(apiData[dataKey], null)
-
-          // token失效, 刷新token
-          if (REFRESH_TOKEN_CODE.includes(apiData[codeKey])) {
-            const config = await handleRefreshToken(response.config)
-            if (config)
-              return this.instance.request(config)
-          }
-          // 业务请求失败
-          const errorResult = handleBusinessError(apiData, this.backendConfig)
-          return handleServiceResult(null, errorResult)
-        }
-        // 接口请求失败
-        const errorResult = handleResponseError(response)
-        return handleServiceResult(null, errorResult)
-      },
-      (error: AxiosError) => {
-        // 处理http常见错误，进行全局提示等
-        const errorResult = handleFontEndError(error)
-        return handleServiceResult(null, errorResult)
-      },
-    )
-  }
-}
--- a/src/service/http/request.ts
+++ b/src/service/http/request.ts
@ -1,125 +0,0 @@
-import type { AxiosInstance, AxiosRequestConfig } from 'axios'
-import CreateAxiosInstance from './instance'
-
-type RequestMethod = 'get' | 'post' | 'put' | 'delete' | 'patch'
-interface RequestParam {
-  url: string
-  method?: RequestMethod
-  data?: any
-  config?: AxiosRequestConfig
-}
-
-async function getRequestResponse(options: {
-  instance: AxiosInstance
-  method: RequestMethod
-  url: string
-  data?: any
-  config?: AxiosRequestConfig
-}) {
-  const { instance, method, url, data, config } = options
-
-  let res: any
-  if (method === 'get' || method === 'delete')
-    res = await instance[method](url, config)
-  else res = await instance[method](url, data, config)
-
-  return res
-}
-
-/**
- * @description:
- * @param {AxiosRequestConfig} axiosConfig - axios配置
- * @param {Service} backendConfig - 后台字段配置
- * @return {*}
- */
-export function createRequest(
-  axiosConfig: AxiosRequestConfig,
-  backendConfig?: Partial<Service.BackendConfig>,
-) {
-  const axiosInstance = new CreateAxiosInstance(axiosConfig, backendConfig)
-  /**
-   * 异步promise请求
-   * @param param - 请求参数
-   * - url: 请求地址
-   * - method: 请求方法(默认get)
-   * - data: 请求的body的data
-   * - config: axios配置
-   */
-  async function asyncRequest<T>(
-    param: RequestParam,
-  ): Promise<Service.RequestResult<T>> {
-    const { url, method = 'get', data, config } = param
-    const { instance } = axiosInstance
-    const res = (await getRequestResponse({
-      instance,
-      method,
-      url,
-      data,
-      config,
-    })) as Service.RequestResult<T>
-    return res
-  }
-  /**
-   * get请求
-   * @param url - 请求地址
-   * @param config - axios配置
-   */
-  function get<T>(url: string, config?: AxiosRequestConfig) {
-    return asyncRequest<T>({ url, config })
-  }
-
-  /**
-   * post请求
-   * @param url - 请求地址
-   * @param data - 请求的body的data
-   * @param config - axios配置
-   */
-  function post<T>(url: string, data?: any, config?: AxiosRequestConfig) {
-    return asyncRequest<T>({ url, method: 'post', data, config })
-  }
-
-  /**
-   * post请求-form参数形式
-   * @param url - 请求地址
-   * @param data - 请求的body的data
-   * @param config - axios配置
-   */
-  function formPost<T>(
-    url: string,
-    data?: any,
-    config: AxiosRequestConfig = {},
-  ) {
-    config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' }
-    return asyncRequest<T>({ url, method: 'post', data, config })
-  }
-
-  /**
-   * delete请求
-   * @param url - 请求地址
-   * @param config - axios配置
-   */
-  function handleDelete<T>(
-    url: string,
-    config?: AxiosRequestConfig,
-  ) {
-    return asyncRequest<T>({ url, method: 'delete', config })
-  }
-
-  /**
-   * put请求
-   * @param url - 请求地址
-   * @param data - 请求的body的data
-   * @param config - axios配置
-   */
-  function put<T>(url: string, data?: any, config?: AxiosRequestConfig) {
-    return asyncRequest<T>({ url, method: 'put', data, config })
-  }
-
-  return {
-    get,
-    post,
-    formPost,
-    put,
-    delete: handleDelete,
-  }
-}
--- a/src/service/http/utils.ts
+++ b/src/service/http/utils.ts
@ -1,5 +1,5 @@
 import qs from 'qs'
-import { ERROR_MSG_DURATION, ERROR_NO_TIP_STATUS } from '@/config'
+import { ERROR_NO_TIP_STATUS } from './config'
 import { isArray, isEmpty, isFile, isNullOrUnDef } from '@/utils'

 export function showError(error: Service.RequestError) {
@ -8,8 +8,7 @@ export function showError(error: Service.RequestError) {
  if (ERROR_NO_TIP_STATUS.includes(code))
    return

-  window.console.warn(error.code, error.msg)
-  window.$message?.error(error.msg, { duration: ERROR_MSG_DURATION })
+  window.$message?.error(error.msg)
 }
 /**
 * 请求数据的转换
@ -21,7 +20,7 @@ export function transformRequestData(
  contentType?: UnionKey.ContentType,
 ) {
  // application/json类型不处理,清除发送参数的无效字段
-  let data: any = clearInvalidParameters(requestData)
+  let data: any = requestData

  // form类型转换
  if (contentType === 'application/x-www-form-urlencoded')
@ -49,17 +48,3 @@ function handleFormData(data: Record<string, any>) {

  return formData
 }
-
-/**
- * 接口提交的参数去除无效字段
- * @param requestData -接口提交的参数
- */
-export function clearInvalidParameters(requestData?: Record<string, any>) {
-  const result: Record<string, any> = {}
-  for (const key in requestData) {
-    if (isEmpty(requestData[key]) || isNullOrUnDef(requestData[key]))
-      continue
-    result[key] = requestData[key]
-  }
-  return result
-}
--- a/src/service/index.ts
+++ b/src/service/index.ts
@ -1,3 +1,3 @@
-export * from './api/test'
+export * from './api/list'
 export * from './api/login'
-export * from './api/mock'
+export * from './api/test'
--- a/src/typings/service.d.ts
+++ b/src/typings/service.d.ts
@ -1,19 +1,26 @@
 /** 请求的相关类型 */
 declare namespace Service {
+  import type { Method } from 'alova'
+
+  interface AlovaConfig {
+    baseURL: string
+    timeout?: number
+    beforeRequest?: (method: Method<globalThis.Ref<unknown>>) => void
+  }

  /** 后端接口返回的数据结构配置 */
  interface BackendConfig {
    /** 表示后端请求状态码的属性字段 */
-    codeKey: string
+    codeKey?: string
    /** 表示后端请求数据的属性字段 */
-    dataKey: string
+    dataKey?: string
    /** 表示后端消息的属性字段 */
-    msgKey: string
+    msgKey?: string
    /** 后端业务上定义的成功请求的状态 */
-    successCode: number | string
+    successCode?: number | string
  }

-  type RequestErrorType = 'Axios' | 'Alova' | 'Response' | 'Business'
+  type RequestErrorType = 'Alova' | 'Response' | 'Business'
  type RequestCode = string | number

  interface RequestError {
--- a/src/views/list/commonList/index.vue
+++ b/src/views/list/commonList/index.vue
@ -169,37 +169,35 @@ function handleAddTable() {
  <NSpace vertical size="large">
    <n-card>
      <n-form ref="formRef" :model="model" label-placement="left" :show-feedback="false">
-        <n-grid :x-gap="30" :cols="18">
-          <n-form-item-gi :span="4" label="姓名" path="condition_1">
+        <n-grid :x-gap="30" :cols="4">
+          <n-form-item-gi label="姓名" path="condition_1">
            <n-input v-model:value="model.condition_1" placeholder="请输入" />
          </n-form-item-gi>
-          <n-form-item-gi :span="4" label="年龄" path="condition_2">
+          <n-form-item-gi label="年龄" path="condition_2">
            <n-input v-model:value="model.condition_2" placeholder="请输入" />
          </n-form-item-gi>
-          <n-form-item-gi :span="4" label="性别" path="condition_3">
+          <n-form-item-gi label="性别" path="condition_3">
            <n-input v-model:value="model.condition_3" placeholder="请输入" />
          </n-form-item-gi>
-          <n-form-item-gi :span="4" label="地址" path="condition_4">
+          <n-form-item-gi label="地址" path="condition_4">
            <n-input v-model:value="model.condition_4" placeholder="请输入" />
          </n-form-item-gi>
-          <n-gi :span="1">
-            <NButton type="primary" @click="getUserList">
-              <template #icon>
-                <i-icon-park-outline-search />
-              </template>
-              搜索
-            </NButton>
-          </n-gi>
-          <n-gi :span="1">
-            <NButton strong secondary @click="handleResetSearch">
-              <template #icon>
-                <i-icon-park-outline-redo />
-              </template>
-              重置
-            </NButton>
-          </n-gi>
        </n-grid>
      </n-form>
+      <n-flex class="mt-1em" justify="end">
+        <NButton type="primary" @click="getUserList">
+          <template #icon>
+            <i-icon-park-outline-search />
+          </template>
+          搜索
+        </NButton>
+        <NButton strong secondary @click="handleResetSearch">
+          <template #icon>
+            <i-icon-park-outline-redo />
+          </template>
+          重置
+        </NButton>
+      </n-flex>
    </n-card>
    <n-card>
      <NSpace vertical size="large">
--- a/src/views/test/test1/index.vue
+++ b/src/views/test/test1/index.vue
@ -1,20 +1,32 @@
 <script setup lang="ts">
+import { useRequest } from 'alova'
 import {
+  FailedRequest,
+  FailedResponse,
+  FailedResponseWithoutTip,
+  dictData,
  expiredTokenRequest,
-  fetachDelete,
-  fetachFormPost,
  fetachGet,
-  fetachPost,
-  fetachPut,
+  fetchDelete,
+  fetchFormPost,
+  fetchPost,
+  fetchPut,
  fetchUpdateToken,
-  testFailedRequest,
-  testFailedResponse,
-  testFailedResponse_NT,
+  getBlob,
+  withoutToken,
 } from '@/service'

 const msg = ref()
+const { data, send } = useRequest(fetachGet({ a: 112211 }), {
+  // 当immediate为false时，默认不发出
+  immediate: false,
+})

-function pinter() {
+function handleRequestHook() {
+  send()
+  msg.value = data.value
+}
+function pinterEnv() {
  msg.value = import.meta.env
 }
 function get() {
@ -23,7 +35,7 @@ function get() {
  })
 }
 function delete2() {
-  fetachDelete().then((res) => {
+  fetchDelete().then((res) => {
    msg.value = res
  })
 }
@ -36,7 +48,7 @@ function post() {
    data4: null,
    data5: undefined,
  }
-  fetachPost(params).then((res) => {
+  fetchPost(params).then((res) => {
    msg.value = res
  })
 }
@ -45,7 +57,7 @@ function formPost() {
  const params = {
    data: '2022-2-2',
  }
-  fetachFormPost(params).then((res) => {
+  fetchFormPost(params).then((res) => {
    msg.value = res
  })
 }
@ -53,26 +65,26 @@ function put() {
  const params = {
    data: '2022-2-2',
  }
-  fetachPut(params).then((res) => {
+  fetchPut(params).then((res) => {
    msg.value = res
  })
 }

 // 测试请求失败
 function failedRequest() {
-  testFailedRequest().then((res) => {
+  FailedRequest().then((res) => {
    msg.value = res
  })
 }
 // 测试业务失败
 function failedResponse() {
-  testFailedResponse().then((res) => {
+  FailedResponse().then((res) => {
    msg.value = res
  })
 }
-// 测试业务失败无提示
-function failedResponse_NT() {
-  testFailedResponse_NT().then((res) => {
+// 测试无提示的业务失败
+function failedResponseWithoutTip() {
+  FailedResponseWithoutTip().then((res) => {
    msg.value = res
  })
 }
@ -88,51 +100,122 @@ function updataToken() {
    msg.value = res
  })
 }
+// 不携带token的接口
+function withoutTokenRequest() {
+  withoutToken().then((res) => {
+    msg.value = res
+  })
+}
+// 不携带token的接口
+function getDictData() {
+  dictData().then((res) => {
+    msg.value = res
+  })
+}
+// 模拟获取二进制文件
+function getBlobFile() {
+  getBlob().then((res) => {
+    msg.value = 'this is blob!'
+    const link = URL.createObjectURL(res)
+    const eleLink = document.createElement('a')
+    eleLink.download = 'okk.png'
+    eleLink.style.display = 'none'
+    eleLink.href = link
+    document.body.appendChild(eleLink)
+    eleLink.click()
+    document.body.removeChild(eleLink)
+  })
+}
 </script>

 <template>
-  <div>
-    <n-h1>接口功能测试</n-h1>
-    <n-space>
-      <n-button strong secondary type="success" @click="pinter">
-        check env
-      </n-button>
-      <n-button strong secondary type="success" @click="get">
-        use online get
-      </n-button>
-      <n-button strong secondary type="success" @click="post">
-        use online post
-      </n-button>
-      <n-button strong secondary type="success" @click="formPost">
-        use online formPost
-      </n-button>
-      <n-button strong secondary type="success" @click="delete2">
-        use online delete
-      </n-button>
-      <n-button strong secondary type="success" @click="put">
-        use online put
-      </n-button>
-      <n-button strong secondary type="error" @click="failedRequest">
-        失败-错误状态码
-      </n-button>
-      <n-button strong secondary type="error" @click="failedResponse">
-        失败-错误业务码
-      </n-button>
-      <n-button strong secondary type="error" @click="failedResponse_NT">
-        响应失败(无提示)
-      </n-button>
-      <n-button strong secondary @click="expiredToken">
-        token 过期
-      </n-button>
-      <n-button strong secondary @click="updataToken">
-        refresh token
-      </n-button>
-    </n-space>
-
-    <pre>
+  <n-card title="网络请求示例">
+    <n-space vertical :size="12">
+      <pre class="bg-#eee">
      {{ msg }}
    </pre>
-  </div>
+      <n-descriptions label-placement="left" bordered>
+        <n-descriptions-item label="检查环境变量">
+          <n-button strong secondary type="success" @click="pinterEnv">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="Get">
+          <n-button strong secondary type="success" @click="get">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="Post">
+          <n-button strong secondary type="success" @click="post">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="formPost">
+          <n-button strong secondary type="success" @click="formPost">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="Delete">
+          <n-button strong secondary type="success" @click="delete2">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="Put">
+          <n-button strong secondary type="success" @click="put">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="useRequest风格">
+          <n-button strong secondary type="success" @click="handleRequestHook">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="不带token的接口">
+          <n-button strong secondary type="success" @click="withoutTokenRequest">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="获取文件下载">
+          <n-button strong secondary type="success" @click="getBlobFile">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="转换请求数据">
+          <n-button strong secondary type="success" @click="getDictData">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="失败-错误状态码">
+          <n-button strong secondary type="error" @click="failedRequest">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="失败-错误业务码">
+          <n-button strong secondary type="error" @click="failedResponse">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="失败-错误业务码(无提示)">
+          <n-button strong secondary type="error" @click="failedResponseWithoutTip">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="401-token过期">
+          <n-button strong secondary @click="expiredToken">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="refresh token">
+          <n-button strong secondary @click="updataToken">
+            click
+          </n-button>
+        </n-descriptions-item>
+      </n-descriptions>
+      <n-alert title="关于401-token失效刷新" type="warning">
+        请在控制台将网络速率设置为最低（1kb左右）后点击查看，否则会造成请求大量发送
+      </n-alert>
+    </n-space>
+  </n-card>
 </template>

 <style scoped></style>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -11,7 +11,7 @@ export default defineConfig(({ mode }: ConfigEnv) => {

  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
-  const env = loadEnv(mode, __dirname, '') as unknown as ImportMetaEnv
+  const env = loadEnv(mode, __dirname, '') as ImportMetaEnv
  const envConfig = proxyConfig[mode as ServiceEnvType]

  return {
@ -24,13 +24,9 @@ export default defineConfig(({ mode }: ConfigEnv) => {
    },
    server: {
      host: '0.0.0.0',
-      port: 4000,
      proxy:
        env.VITE_HTTP_PROXY === 'Y' ? createViteProxy(envConfig) : undefined,
    },
-    preview: {
-      port: 5211,
-    },
    build: {
      target: 'esnext',
      reportCompressedSize: false, // 启用/禁用 gzip 压缩大小报告