关于过大的请求参数被改变导致请求数据失败（404）的问题

场景

当我们请求某一个数据的具体内容的时候，我们可能需要在发起请求的时候传入该数据具体内容的 id 作为请求参数，以此匹配当对应的数据内容。

而这个 id ，也通常都是我们之前发送请求从服务端获取的

当我们的数据较多的时候，服务器返回给我们的 id 可能是一个很大的数字。

这个时候我们携带这个 id 去请求数据，会发现浏览器报错

Error: Request failed with status code 404

404: 表示服务器没有找到对应的资源，是我们的参数错了吗？

分析

我们通过 浏览器 调试工具去查看我们之前获取的 id

后端返回给我们的数据，通常都是 JSON 格式的字符串

'{ "id": 9007199254740995, "name": "Jack", "age": 18 }'

我们需要将这个字符串，用JSON.parse()转化成对象，才能供我们方便的使用数据

一般 axios 会在内部帮我们处理好数据直接返回给我们

那么现在我们将这个数据转化为 对象

  var res = JSON.parse(
        '{ "id": 9007199254740995, "name": "Jack", "age": 18 }'
      )
      console.log(res)

我们发现输出结果

 Object: {
        age: 18
        id: 9007199254740996
        name: "Jack"
        __proto__: Object
      }

这里解析出来的 id 比之前 服务器返回给我们的 id 要大1

这是因为 JS 语言自身的原因：

JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。

Math.pow(2, 53) // 9007199254740992

9007199254740992  // 9007199254740992
9007199254740993  // 9007199254740992

所以当我们再用这个 被解析错误的 id 再去发起请求，服务器自然是找不到对应的资源。

解决

json-bigint 是一个第三方包，它可以帮我们很好的处理这个问题。

使用步骤

• 安装

  npm i json-bigint
  

• 导入

  import jsonBig from 'json-bigint'
  

• 基本使用（具体看官方文档，这里只说怎么解决这个问题的使用）

   var overDate = '{"value": 9007199254740993,"name": "booker"}'
        console.log(jsonBig.parse(overDate))
  

  返回一个对象

  {value: BigNumber, name: "booker"}
  {
   name: "booker"
   value: BigNumber
  	c: (2) [90, 7199254740993]
  	e: 15
  	s: 1
   __proto__: Object
  }
  

  通过这个方法解析的对象，过大的数字会被转化成一个对象BigNumber

  **注意：**我们可以直接用这个数作为参数，因为字符串拼接的途中会自动将对象转化成字符串类型

   console.log('booker' + res.value)
   // booker9007199254740993
  

在axios 中配置使用

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

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

export default request