后端返回大数问题

这个问题并不难,但是在开发的时候没有注意到

  1. 后端返回了一个列表数据,包含id,这个id是一个大数,列表进入详情,需要将id传入到详情页面

  2. 详情页面内部通过id获取数据一直404,id不正确

  3. 找问题,从路由传参到请求数据发现id没有问题,然后和后端进行联调,发现后端返回的id和我获取的id不一致

  4. 实际问题产生的原因:后端返回了一个超过2的53次方的一个大数,而axios底层获取到后端原始json数据后通过JSON.parse处理,导致处理后的大数不精准了

  5. 让后端返回字符串格式

  6. 前端处理:

    1. 后端返回原始数据, 不让axios处理, 我们处理然后在交给aioxs
    2. axios他有一个配置函数transformResponse, 获取到的后端返回的原始数据json数据,在transformResponse内部通过JSONBig(json-bigint)处理后端返回的json数据,他在处理json数据的时候,会将大数处理为对象,将大数对象转为字符串使用,得到了正确的id,内部重写了toString

    npm i json-bigint

javascript 复制代码
import jsonBig from 'json-bigint'

const JSONBig = jsonBig({ storeAsString: true })

transformResponse: [
  function (data) {
    // 1. 找到了处理的时机
    try {
      return JSONBig.parse(data) // a.num + ''        155 4993 7742 
    } catch (err) {
      return data
    }
  },
],
相关推荐
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip8 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel8 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休8 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪8 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do8 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选8 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选9 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼9 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——9 小时前
前端登录鉴权详解
前端·javascript