40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<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>
|