处理 Axios 拿到的大数字

后端代码// 后端返回的是 JSON 格式的字符串，字符串中的数字超出了 2 的 53 次方，即大数字require('http').createServer((req, res) => {// exceed Math.pow(2, 53)res.end('{"id": 900719925474099288}');}).listen(3000, () => console.log('S

当铺鬼

1777人浏览 · 2021-03-04 08:30:25

当铺鬼 · 2021-03-04 08:30:25 发布

后端代码

// 后端返回的是 JSON 格式的字符串，字符串中的数字超出了 2 的 53 次方，即大数字
require('http')
    .createServer((req, res) => {
        // exceed Math.pow(2, 53)
        res.end('{"id": 900719925474099288}');
    })
    .listen(3000, () => console.log('Server running on http://localhost:3000'));

前端代码

问题：前端在使用 axios 请求接口获取数据的时候，却发现拿到的数据和后端返回的不一样，代码如下：

const axios = require('axios');

const request = axios.create({
    baseURL: 'http://localhost:3000',
});

request.get('/').then(({ data }) => {
    console.log(data); // { id: 900719925474099300 }
});

原因：axios 内部会对后端返回的数据进行 JSON.parse 的操作，而 JSON.parse 是搞不定大数字的

解决方案

const axios = require('axios');
const JSONBIGINT = require('json-bigint');

const request = axios.create({
    baseURL: 'http://localhost:3000',
    transformResponse: [
        data => {
            try {
                return JSONBIGINT.parse(data);
            } catch (err) {
                return data;
            }
        },
    ],
});

request.get('/').then(({ data }) => {
    console.log(JSONBIGINT.stringify(data));
});