feat: alova.js替换axios

web/package.json

@@ -23,6 +23,7 @@
     "gen-auto-import": "tsx gen-auto-import.ts"
   },
   "dependencies": {
+    "@alova/adapter-xhr": "^2.1.1",
     "@eslint/eslintrc": "^3.2.0",
     "@fontsource-variable/jetbrains-mono": "^5.1.1",
     "@guolao/vue-monaco-editor": "^1.5.4",

web/src/api/panel/file/index.ts

@@ -1,47 +1,39 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 创建文件/文件夹
-  create: (path: string, dir: boolean): any => request.post('/file/create', { path, dir }),
+  create: (path: string, dir: boolean): any => http.Post('/file/create', { path, dir }),
   // 获取文件内容
-  content: (path: string): any => request.get('/file/content', { params: { path } }),
+  content: (path: string): any => http.Get('/file/content', { params: { path } }),
   // 保存文件
-  save: (path: string, content: string): any => request.post('/file/save', { path, content }),
+  save: (path: string, content: string): any => http.Post('/file/save', { path, content }),
   // 删除文件
-  delete: (path: string): any => request.post('/file/delete', { path }),
+  delete: (path: string): any => http.Post('/file/delete', { path }),
   // 上传文件
-  upload: (path: string, formData: FormData, onProgress: any): any => {
-    formData.append('path', path)
-    return request.post('/file/upload', formData, {
-      headers: { 'Content-Type': 'multipart/form-data' },
-      onUploadProgress: (progressEvent: any) => {
-        onProgress({ percent: Math.ceil((progressEvent.loaded / progressEvent.total) * 100) })
-      }
-    })
-  },
+  upload: (formData: FormData): any => http.Post('/file/upload', formData),
   // 检查文件是否存在
-  exist: (paths: string[]): any => request.post('/file/exist', paths),
+  exist: (paths: string[]): any => http.Post('/file/exist', paths),
   // 移动文件
-  move: (paths: any[]): any => request.post('/file/move', paths),
+  move: (paths: any[]): any => http.Post('/file/move', paths),
   // 复制文件
-  copy: (paths: any[]): any => request.post('/file/copy', paths),
+  copy: (paths: any[]): any => http.Post('/file/copy', paths),
   // 远程下载
   remoteDownload: (path: string, url: string): any =>
-    request.post('/file/remoteDownload', { path, url }),
+    http.Post('/file/remoteDownload', { path, url }),
   // 获取文件信息
-  info: (path: string): any => request.get('/file/info', { params: { path } }),
+  info: (path: string): any => http.Get('/file/info', { params: { path } }),
   // 修改文件权限
   permission: (path: string, mode: string, owner: string, group: string): any =>
-    request.post('/file/permission', { path, mode, owner, group }),
+    http.Post('/file/permission', { path, mode, owner, group }),
   // 压缩文件
   compress: (dir: string, paths: string[], file: string): any =>
-    request.post('/file/compress', { dir, paths, file }),
+    http.Post('/file/compress', { dir, paths, file }),
   // 解压文件
-  unCompress: (file: string, path: string): any => request.post('/file/unCompress', { file, path }),
+  unCompress: (file: string, path: string): any => http.Post('/file/unCompress', { file, path }),
   // 搜索文件
   search: (path: string, keyword: string, sub: boolean, page: number, limit: number): any =>
-    request.get('/file/search', { params: { path, keyword, sub, page, limit } }),
+    http.Get('/file/search', { params: { path, keyword, sub, page, limit } }),
   // 获取文件列表
   list: (path: string, page: number, limit: number, sort: string): any =>
-    request.get('/file/list', { params: { path, page, limit, sort } })
+    http.Get('/file/list', { params: { path, page, limit, sort } })
 }

web/src/components/common/CodeEditor.vue

@@ -18,25 +18,25 @@ const props = defineProps({
 const disabled = ref(false) // 在出现错误的情况下禁用保存
 const data = ref('')
 
-const get = async () => {
-  await file
-    .content(props.path)
-    .then((res) => {
-      data.value = decodeBase64(res.data.content)
+const get = () => {
+  useRequest(file.content(props.path))
+    .onSuccess(({ data }) => {
+      data.value = decodeBase64(data.content)
       window.$message.success('获取成功')
     })
-    .catch(() => {
+    .onError(() => {
       disabled.value = true
     })
 }
 
-const save = async () => {
+const save = () => {
   if (disabled.value) {
     window.$message.error('当前状态下不可保存')
     return
   }
-  await file.save(props.path, data.value)
-  window.$message.success('保存成功')
+  useRequest(file.save(props.path, data.value)).onSuccess(() => {
+    window.$message.success('保存成功')
+  })
 }
 
 onMounted(() => {

web/src/utils/http/index.ts

@@ -1,6 +1,7 @@
 import { resolveResError } from '@/utils/http/helpers'
+import type { AlovaXHRResponse } from '@alova/adapter-xhr'
+import { xhrRequestAdapter } from '@alova/adapter-xhr'
 import { createAlova, Method } from 'alova'
-import adapterFetch from 'alova/fetch'
 import VueHook from 'alova/vue'
 import axios from 'axios'
 import { reqReject, reqResolve, resReject, resResolve } from './interceptors'
@@ -27,15 +28,21 @@ export const http = createAlova({
   id: 'panel',
   cacheFor: null,
   statesHook: VueHook,
-  requestAdapter: adapterFetch(),
+  requestAdapter: xhrRequestAdapter(),
   baseURL: import.meta.env.VITE_BASE_API,
   responded: {
-    onSuccess: async (response: Response, method: Method) => {
-      const ct = response.headers.get('Content-Type')
-      const json =
-        ct && ct.includes('application/json')
-          ? await response.json()
-          : { code: response.status, message: await response.text() }
+    onSuccess: async (response: AlovaXHRResponse, method: Method) => {
+      const ct = response.headers['Content-Type'] || response.headers['content-type']
+      let json
+      try {
+        if (ct && ct.includes('application/json')) {
+          json = typeof response.data === 'string' ? JSON.parse(response.data) : response.data
+        } else {
+          json = { code: response.status, message: response.data }
+        }
+      } catch (error) {
+        json = { code: response.status, message: 'JSON 解析失败' }
+      }
       const { status, statusText } = response
       const { meta } = method
       if (status !== 200) {

web/src/views/file/CompressModal.vue

@@ -24,26 +24,24 @@ const ensureExtension = (extension: string) => {
   }
 }
 
-const handleArchive = async () => {
+const handleArchive = () => {
   ensureExtension(format.value)
   loading.value = true
   const message = window.$message.loading('正在压缩中...', {
     duration: 0
   })
   const paths = selected.value.map((item) => item.replace(path.value, '').replace(/^\//, ''))
-  await api
-    .compress(path.value, paths, file.value)
-    .then(() => {
-      window.$message.success('压缩成功')
+  useRequest(api.compress(path.value, paths, file.value))
+    .onSuccess(() => {
       show.value = false
       selected.value = []
+      window.$message.success('压缩成功')
     })
-    .catch(() => {
-      window.$message.error('压缩失败')
+    .onComplete(() => {
+      message?.destroy()
+      loading.value = false
+      window.$bus.emit('file:refresh')
     })
-  message?.destroy()
-  loading.value = false
-  window.$bus.emit('file:refresh')
 }
 
 onMounted(() => {