后端返回大数问题

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

  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
    }
  },
],
相关推荐
OpenTiny社区5 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠34 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞38 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js