问题

最近在做一个vue项目发现控制台解析preview和response数据不一致.

原因

在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式。
JavaScript中的数字类型有限制，无法准确表示超过2^53=9007199254740992（约9 * 10^15）的整数。当数字超过这个范围时，它们可能会被近似为最接近的可表示数字。

解决方案

方法一：在返回数据之前就将数据转换为字符串。（后端处理）
方法二：在传递给 then/catch 前，结合开源库json-bigint，使用transformResponse修改响应数据。（前端处理）

前端一般都是用axios进行数据请求，我们通过引入json-bigint来解决。
json-bigint 会把超出 JS 安全整数范围的数字转为一个 BigNumber 类型的对象，对象数据是它内部的一个算法处理之后的。
Axios 提供了自定义处理原始后端返回数据的 API：transformResponse 。

1、引入插件

npm install json-bigint

2、在封装的请求工具类中添加如下代码即可。

import JSONBIG from 'json-bigint';

const request = axios.create({
  baseURL: '你接口的基础路径', // 接口基础路径

  // transformResponse 允许自定义原始的响应数据（字符串）
  transformResponse: [
	  function (data) {
	    try {
		     // 如果转换成功则返回转换的数据结果
		     return JSONBig.parse(data);
	    } catch (err) {
	      	// 如果转换失败，则包装为统一数据格式并返回
	        return JSON.parse(data);
	    }
	  }
  ]
})

vue项目中如果将请求接口统一封装，现在只想将某一个接口改动，可以这样写。

export const searchOrder = (data) => request(`/cms/order/orderSelfList?page_size=${data.page_size}&page_number=${data.page_number}`,"POST",data,
    {
        transformResponse: [
            function (resData) {
                try {
                    return JSONBig.parse(resData);
                } catch (e) {
                    return JSON.parse(resData);
                }
            },
        ]        
    }
);