后端返回大数问题

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

  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
    }
  },
],
相关推荐
掘金一周6 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i8 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
源码站~10 分钟前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
咚咚咚ddd11 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端
MiyueFE11 分钟前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
Hilaku11 分钟前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css
OLong14 分钟前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
江城开朗的豌豆14 分钟前
路由守卫通关秘籍:这些钩子函数让你的页面跳转稳如老狗!
前端·javascript·vue.js
闲坐含香咀翠14 分钟前
记一次交互优化:从根源上解决Axios请求竞态问题
前端·http·浏览器
加减法原则17 分钟前
Vue 模板引用(ref)全面指南:从基础到高级应用
vue.js