前端转换bigInt，axios拦截器失效

关于bigInt的使用

这篇文章算是使用中的小笔记吧，主要是我自己搜索没找到直接的方法😓，不知道是不是关键词不对❓在这里记录一下。

切换雪花ID

因为业务数据的需要，数据库将原有的自增Id转换成了雪花Id，主要是解决分布式系统中数据问题，我这里是对原来双主键的模式进行了一个改进，更多的雪花Id知识可以自己去了解一下，这个算法来源于 “世界上，没有完全相同的两片雪花”，下面主要讲前端的应用，也是问题出现和解决的过程。

解决精度丢失问题

进度丢失，前端不支持bigInt

当对后端程序改进之后，主键变了，那对应的前端数据也发生了改变，替换了主键之后，理论上就可以用了，但事实上并不是这样。动态菜单只加载了一部分。

让我们来看看数据，很明显的数据精度丢失了，后端查询的数据主键全部发生了错误，同Id被过滤了，加载不出来。

解决问题

雪花Id不是新出的东西，总不至于我一个人用吧，找广大网友取取经，很容易就找到了，使用 json-bigint 在相应的时候进行处理数字可以解决这个问题

1. 安装 json-bigint包

npm install json-bigint

2. 拦截器对返回数据处理

//创建一个axios实例 
const instance = axios.create({
   // withCredentials: true,
   timeout: 5000  //5秒
})

instance.defaults.transformResponse = [(data: any) => {
   return JSONBig.parse(data)
}]

再来验证一下我们的数据，已经得到了处理，菜单也正常的加载了

拦截器失效

本以为前端修改好了，没有对原有功能的验证，然而，再一次未登录的请求（无token）中发现了问题，页面并没有自动跳转到登录页页面，拦截器出现问题了。

将数据输出出来：

浏览器已经判断了是401，鉴权失败，但是拦截器未能正确获取到错误信息，后面的判断自然没有作用了。

验证及解决

那么问题应该就是我刚加的 json-bigint了，在 axios 的拦截器判断之前， json-bigint将返回的错误处理掉了。简单的看下 json-bigint 的描述，对于非json格式的数据转换会报错，但是，这里并不一定是这个问题，输出一下 transformResponse 中到底收到了一个什么。

可以看见，在这里输出了一个空字符串，在这里将空字符串传给了 axios 的拦截器，当然是没有数据的，那么这并不是想要的，我想要原始的错误。

因此，在transformResponse 中过滤掉数据为空字符串的情况就可以了。

instance.defaults.transformResponse = [(data: any) => {
    if (data != "")
        return JSONBig.parse(data)
    else
        return;
}]

可以看见，拦截器收到了正确的错误返回。