chore: 添加请求库

package.json

@@ -24,7 +24,8 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "6",
-    "recharts": "2.12.7"
+    "recharts": "2.12.7",
+    "swr": "^2.3.6"
   },
   "devDependencies": {
     "@types/node": "^22.14.0",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       recharts:
         specifier: 2.12.7
         version: 2.12.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      swr:
+        specifier: ^2.3.6
+        version: 2.3.6(react@19.2.0)
     devDependencies:
       '@types/node':
         specifier: ^22.14.0
@@ -755,6 +758,10 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   detect-libc@1.0.3:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
     engines: {node: '>=0.10'}
@@ -1021,6 +1028,11 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  swr@2.3.6:
+    resolution: {integrity: sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -1698,6 +1710,8 @@ snapshots:
 
   deepmerge@4.3.1: {}
 
+  dequal@2.0.3: {}
+
   detect-libc@1.0.3:
     optional: true
 
@@ -1979,6 +1993,12 @@ snapshots:
     dependencies:
       react: 19.2.0
 
+  swr@2.3.6(react@19.2.0):
+    dependencies:
+      dequal: 2.0.3
+      react: 19.2.0
+      use-sync-external-store: 1.6.0(react@19.2.0)
+
   tiny-invariant@1.3.3: {}
 
   tinyglobby@0.2.15:

src/api/index.ts

@@ -5,7 +5,43 @@ import adapterFetch from 'alova/fetch';
 
 const alovaInstance = createAlova({
   requestAdapter: adapterFetch(),
-  responded: response => response.json(),
+  beforeRequest(method) {
+    if (!method.meta?.ignoreToken) {
+      method.config.headers.token = 'token';
+    }
+  },
+  responded: {
+    // 请求成功的拦截器
+    // 当使用 `alova/fetch` 请求适配器时，第一个参数接收Response对象
+    // 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
+    onSuccess: async (response, method) => {
+      if (response.status >= 400) {
+        throw new Error(response.statusText);
+      }
+      const json = await response.json();
+      if (json.code !== 200) {
+        // 抛出错误或返回reject状态的Promise实例时，此请求将抛出错误
+        throw new Error(json.message);
+      }
+
+      // 解析的响应数据将传给method实例的transform钩子函数，这些函数将在后续讲解
+      return json.data;
+    },
+
+    // 请求失败的拦截器
+    // 请求错误时将会进入该拦截器。
+    // 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
+    onError: (err, method) => {
+      alert(err.message);
+    },
+
+    // 请求完成的拦截器
+    // 当你需要在请求不论是成功、失败、还是命中缓存都需要执行的逻辑时，可以在创建alova实例时指定全局的`onComplete`拦截器，例如关闭请求 loading 状态。
+    // 接收当前请求的method实例
+    onComplete: async method => {
+      // 处理请求完成逻辑
+    }
+  },
   statesHook: ReactHook
 });