数据库自增 id 过大导致前端时数据丢失

可以看到，前端响应参数是没有丢失精度的

但是在接受 axios 请求参数时出现了精度丢失

解决方案一：改变 axios 字符编码

复制代码

axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';

未解决

解决方案二：手动使用 json.parse() 方法还原响应数据

javascript 复制代码

axios.defaults.transformResponse = [];
const articles = ref(null);

function safeJsonParse(jsonStr) {
    const regex = /"(\w+)":([^,}]+)/g;
    let match;
    let result = '';
    let index = 0;
    while ((match = regex.exec(jsonStr))!== null) {
        const key = match[1];
        let value = match[2];
        if (key === 'id' && /^\d+$/.test(value)) {
            const numValue = Number(value);
            if (numValue > Number.MAX_SAFE_INTEGER) {
                value = `"${value}"`;
            }
        }
        result += jsonStr.slice(index, match.index) + `"${key}":${value}`;
        index = regex.lastIndex;
    }
    result += jsonStr.slice(index);
    return JSON.parse(result);
}

const getPostArticles = async () => {
    const res = await axios({
        method: 'post',
        url: '/articles',
        data: {
            page: 1,
            pageSize: 10
        }
    });
    const parsedData = safeJsonParse(res.data); // 手动解析响应数据
    console.log('手动解析后的原始响应数据:', parsedData);
    articles.value = parsedData.data;
    console.log('articles数组为',articles);
};

成功拿到一整个响应的对象，数据没有丢失

但是引发了新的问题，在跳转到文章详情页面后，文章详情发送请求成功却没有正确赋值

找到错误点，整个项目是用的同一个 axios 实例对象，当这个对象开启手动处理响应的 json 参数后，每一个 axios 请求都需要手动处理了

解决方案，请求的 axios 独立出来，选择使用新创建的 axios 实例来发送异步请求

javascript 复制代码

import axios from 'axios';

// 创建自定义的 axios 实例
const customAxios = axios.create({
  baseURL: 'http://localhost:8888',
  timeout: 5000
});
//开启自定义处理响应
customAxios.defaults.transformResponse = [];

// 获取文章列表的函数
const getPostArticles = async () => {
  try {
    const res = await customAxios.post('/articles', {
      page: 1,
      pageSize: 10
    });
    const parsedData = safeJsonParse(res.data);
    console.log('手动解析后的原始响应数据:', parsedData);
    articles.value = parsedData.data;
    console.log('articles 数组为', articles);
  } catch (error) {
    console.error('获取文章列表失败:', error);
  }
};

这个 axios 实例只为这一个页面服务