F12中返回的id里preview和response内容不一致的问题

问题：

以前一直以为，preview和response返回的内容是一个东西，最近开发的时候，发现居然会不一样，比如我后端返回了一个整数型的id，比如response里面显示的是1123218298319821，而priview现实的是是1123218298312100类似于后面尾数补零了，为什么会这样？

原因：

①后面去查阅子类才发现是因为js中，后端返回的是整型，导致精度丢失

JavaScript精度限制：JavaScript的Number类型是双精度浮点数，安全整数范围为
-9007199254740991到9007199254740991（约15位）。当数字超过17位时，会发生精度
丢失，超出的部分会被自动补零。

示例：

const longNumber=914081478893860687;
console.1og(longNumber);//输出:914081478893860700

②浏览器解析差异：浏览器在Preview中会将JSON数据自动转换为JavaScript对象格式，而此
时长整型数字可能因精度丢失而显示错误。

解决：

解决前，我们先来了解一下，perview和response的区别：

Perview的意思是(response preview):响应-预览 (响应资源进行了格式处理的内容)

Response的意思是:(Raw response data):原始-响应-的数据(响应资源未进行格式处理的内容）

①最直接的方法，就是后端将返回的类型改为string类型

②如果不想动后端的接口，也可以修改前端的

既然response里面的数据是对的，那就拿到response的数据

但是，这边注意的是，response数据我们是没有进行解析的，不能直接使用

所以拿到了之后需要转为json格式使用

代码如下：

// 1. 发起请求，先获取原始响应文本（不直接用response.json()）
fetch('/api/your-list-api') // 替换为你的接口地址
  .then(response => response.text()) // 获取原始文本，不解析
  .then(rawText => {
    // 2. 用正则把18位及以上的数字转为字符串（关键步骤）
    // 匹配规则：数字长度≥18位，且前后是JSON结构中的分隔符（如冒号、逗号、括号）
    const processedText = rawText.replace(
      /(:|,|\[|\{)\s*(\d{18,})\s*(:|,|\]|\})/g,
      (match, prefix, num, suffix) => {
        // 给长数字加引号，转为字符串
        return `${prefix}"${num}"${suffix}`;
      }
    );

    // 3. 用原生JSON.parse解析处理后的文本
    const data = JSON.parse(processedText);

    // 4. 此时userId已转为字符串，可直接在表格中展示
    console.log('处理后的userId:', data.list[0].userId); // "914081478893860687"（完整）
    return data.list; // 用于表格渲染
  })
  .catch(error => {
    console.error('请求失败:', error);
  });