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

665 阅读3分钟

场景

当我们请求某一个数据的具体内容的时候,我们可能需要在发起请求的时候传入该数据具体内容的 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^532^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