scenario

When we request the specific content of a certain data, we may need to pass the id of the specific content of the data as the request parameter when we initiate the request, so as to match the corresponding data content.

This id is usually obtained from the server when we send the request

When we have a lot of data, the id returned by the server may be a large number.

At this time we carry the ID to request data, will find the browser error

Error: Request failed with status code 404
Copy the code

404: Indicates that the server did not find the corresponding resource.

Analysis of the

We use the browser debugging tool to view the ID we obtained earlier

The data returned to us from the back end is usually a string in JSON format

'{ "id": 9007199254740995."name": "Jack"."age": 18} 'Copy the code

We need to convert this string to an object using json.parse () so that we can easily use the data

Axios will normally process the data for us internally and send it back to us

So now let’s turn this data into an object

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

We find the output

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

The id resolved here is 1 greater than the id returned by the server

This is because of the JS language itself:

The range of integers that JavaScript can accurately represent is between -2^53 and 2^53 (excluding the two endpoints), beyond which the value cannot be accurately represented, making JavaScript unsuitable for precise scientific and financial calculations.

Math.pow(2.53) / / 9007199254740992

9007199254740992  / / 9007199254740992
9007199254740993  / / 9007199254740992
Copy the code

So when we use the wrong id to initiate a request again, the server naturally cannot find the corresponding resource.

To solve

Json-bigint is a third-party package that can help with this problem.

Using the step

  • The installation

    npm i json-bigint
Copy the code

  • The import

    import jsonBig from 'json-bigint'
Copy the code

  • Basic use (see the official document for details, here only say how to solve the problem of use)

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

    Return an object

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

    For objects parsed in this way, large numbers are converted to an object called BigNumber

    ** Note: ** we can use this number directly as an argument, because string concatenation automatically converts the object to a string type

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

Configured for use in AXIOS

const request = axios.create({
  baseURL: 'Interface base path'.// Interface base path

  // transformResponse allows you to customize raw response data (strings)
  transformResponse: [function (data) {
    try {
      // If the conversion succeeds, the result of the conversion is returned
      return jsonBig.parse(data)
    } catch (err) {
      // If the conversion fails, wrap it in a uniform data format and return
      return {
        data
      }
    }
  }]
})

export default request
Copy the code