feat: enhances compatibility with APIs returning large numeric values (#6250)

playground/package.json

@@ -48,8 +48,12 @@
     "@vueuse/core": "catalog:",
     "ant-design-vue": "catalog:",
     "dayjs": "catalog:",
+    "json-bigint": "catalog:",
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "@types/json-bigint": "catalog:"
   }
 }

playground/src/api/examples/json-bigint.ts

@@ -0,0 +1,10 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 发起请求
+ */
+async function getBigIntData() {
+  return requestClient.get('/demo/bigint');
+}
+
+export { getBigIntData };

playground/src/api/request.ts

@@ -1,7 +1,7 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { RequestClientOptions } from '@vben/request';
+import type { AxiosResponseHeaders, RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
@@ -14,6 +14,7 @@ import {
 import { useAccessStore } from '@vben/stores';
 
 import { message } from 'ant-design-vue';
+import JSONBigInt from 'json-bigint';
 
 import { useAuthStore } from '#/store';
 
@@ -25,6 +26,12 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
     ...options,
     baseURL,
+    transformResponse: (data: any, header: AxiosResponseHeaders) => {
+      // storeAsString指示将BigInt存储为字符串，设为false则会存储为内置的BigInt类型
+      return header.getContentType()?.toString().includes('application/json')
+        ? JSONBigInt({ storeAsString: true }).parse(data)
+        : data;
+    },
   });
 
   /**

playground/src/router/routes/modules/demos.ts

@@ -255,6 +255,16 @@ const routes: RouteRecordRaw[] = [
               title: $t('demos.features.requestParamsSerializer'),
             },
           },
+          {
+            name: 'BigIntDemo',
+            path: '/demos/features/json-bigint',
+            component: () =>
+              import('#/views/demos/features/json-bigint/index.vue'),
+            meta: {
+              icon: 'lucide:grape',
+              title: 'JSON BigInt',
+            },
+          },
         ],
       },
       // 面包屑导航

playground/src/views/demos/features/json-bigint/index.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Alert, Button, Card } from 'ant-design-vue';
+
+import { getBigIntData } from '#/api/examples/json-bigint';
+
+const response = ref('');
+function fetchData() {
+  getBigIntData().then((res) => {
+    response.value = res;
+  });
+}
+</script>
+<template>
+  <Page
+    title="JSON BigInt Support"
+    description="解析后端返回的长整数（long/bigInt）。代码位置：playground/src/api/request.ts中的transformResponse"
+  >
+    <Card>
+      <Alert>
+        <template #message>
+          有些后端接口返回的ID是长整数，但javascript原生的JSON解析是不支持超过2^53-1的长整数的。
+          这种情况可以建议后端返回数据前将长整数转换为字符串类型。如果后端不接受我们的建议😡……
+          <br />
+          下面的按钮点击后会发起请求，接口返回的JSON数据中的id字段是超出整数范围的数字，已自动将其解析为字符串
+        </template>
+      </Alert>
+      <Button class="mt-4" type="primary" @click="fetchData">发起请求</Button>
+      <div>
+        <pre>
+        {{ response }}
+        </pre>
+      </div>
+    </Card>
+  </Page>
+</template>