プロジェクトの中でJavaScriptの中で最大の安全整数

2914 ワード

axios vue.js javascript

一番安全な整数は何ですか?
MAX_SAFE_INTEGERは9007199254740991の値の定数です.Javascriptのデジタル記憶は、IEEE 754に規定されたデュアル精度浮動小数点データタイプを使用しているため、このデータタイプは、-(253-1)から253-1までの数値(境界値を含む)を安全に記憶することができる.MDN WEB DOCS
プロジェクトではどのようなエラーが発生しますか?
コードの中でMAX_を出力します.SAFE_INTEGERの大きいNumber値

console.log(9007199254740999) // 9007199254741000
console.log(9007199254740993) // 9007199254740992

コードの中でセキュリティ格納を超えた数値を比較すると、次のような場合があります.

9007199254740993 === 9007199254740992 // true

実際のプロジェクトで発生した問題
vueプロジェクトの開発を行う時、axiosを通じて前後のエンドデータのインタラクションを行います.
バックエンドはいくつかのデータを定義する時、データのIDをMAX_より設定します.SAFE_INTEGERの大きいintタイプ
私が取った後もこのことに気づいていませんでした.あるデータを修正する時、データIDを呼び出してデータの位置を特定しました.
そして問題が発生しました...
データのデッドタイムは修正できません.バックエンドはこのデータがないに戻り、長い間調整しました.
そしてpreviewとreponseのデータを比較して両者のデータが一致しないことを発見した.
どう解決しますか
最初の考えはaxiosのブロッカーで処理して、数字の種類を文字列に変換します.

9007199254740993  => '9007199254740993'

しかし、試してみたら、axiosブロックの中のデータ自体が間違っています.
そして原生のfetchで処理しました.

export function getData(data) {
  const promise = new Promise(function (resolve, reject) {
    const headers = new Headers()
    headers.append('Content-Type', 'application/json')
    const config = { method: 'POST', headers, body: JSON.stringify(data) }
    fetch('api/url', config).then(res => res.text()).then(text => {
      function numberToString (match) {
        return `:"${match.substring(1, match.length - 1)}",`
      }
      const responseJson = JSON.parse(text.replace(/:\d{15,100},/g, numberToString))
      resolve(responseJson)
    })
  })
  return promise
}

しかし問題はこれが一つのアプリの問題を解決しただけで、その後は全部このように書きます.面倒くさいです.それにfetchにはaxiosの中のスクリーンショットがないので、異常を統一的に処理できません.
すべてのfetchを自分でカプセル化したいです.axiosのようにブロッキング機能を設定します.....
あとはないです.今必要なfetchを一つ包装するには半日から一日かかります.そしてもうすぐ退勤しますので、axios文書を見に行きます.axios文書にはもうこのようなコールバック関数があります.この問題を解決できます.

 // `transformResponse` allows changes to the response data to be made before
  // it is passed to then/catch
  transformResponse: [function (data) {
    // Do whatever you want to transform the data

    return data;
  }],

これは文書を見ない悪い習慣で、長い時間を浪費しました.
最後のコード

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api   base_url
  timeout: 5*1000, // request timeout
  transformResponse: [function (data) {
    function numberToString (match) {
      return `:"${match.substring(1, match.length - 1)}",`
    }
    if (isJSON(data)) {
      const responseJson = JSON.parse(data.replace(/:\d{15,100},/g, numberToString))
      return responseJson
    } else {
      return data
    }
  }]
})

締め括りをつける
第一に、私のこのデータはjsonタイプですので、元のデータを取ったら文字列です.実は文字列を処理します.
第二に、最後の案は最適ではないです.このために各データを処理します.そのデータの中に範囲外の数字があるかどうかに関わらず.
第三に、よく考えられる方案はバックエンドとドッキングする時、それらが超えていることを確認してから、この二つの状況を区別して、異なるaxiosパッケージを使うことです.

javascript浮動小数点加減乗除計算に問題があります.以下のコードを整理してこの問題を回避します.