使用axios請求，前端數字long類型精度問題解決方法

今天開發遇到個問題，伺服器後端的Long類型資料，傳到前端會出現精度丢失，如：164379764419858435，前端會變成164379764419858430。

在浏覽器中做測試可知，這就是一個精度丢失的問題。

前端使用的axios來發起請求的，最開始以為是浏覽器的問題，但是通過postman來請求是沒問題，打開浏覽器開發工具，在xhr下的response響應中也是沒問題的，代表是請求成功後資料格式化出問題了，下面講解下各種解決方案。

出現原因​

背景資料庫定義的bigint類型（對應Long）的值太長會導緻傳遞給前端的時候精度丢失,其原因是後端語言和js對位元組碼的解析長度不一樣。

前端js對Long類型支援的精度不夠，導緻後端使用的Long傳到前端丢失精度。

方案一：​

前端引入 json-bigint

yarn add json-bigint
或
npm install json-bigint      

在axios封裝的地方，transformResponse 在傳遞給 then/catch 前，允許修改響應資料。

export const list = (data) => {
    return request({
        url: baseUrl + '/fly63/api/list',
        method: 'post',
        params: data,
        transformResponse: [ data => {
            data = JSONbig.parse(data);
            data.list.filter((item)=>{
                item.id = item.id.toString();
                return item;
            })
            return data;
        }],
    })
}      

方案二：

修改axios的源碼，在node_modules/axios/lib/default.js中找到transformResponse 将其内容改為

transformResponse: [function transformResponse(data) {
    /*eslint no-param-reassign:0*/
    if (typeof data === 'string') {
      try {
        data = JSON.parse(data);
      } catch (e) { /* Ignore */ }
    }
    return data;
  }],      

方案三：

背景傳到前台時，Long類型資料，轉為String類型。可以直接操作傳回的對象資料，toString()該long類型資料。（推薦）

​