NuxtJS axiosでBigIntを扱う

こんにちは、フロントエンドエンジニアの小山です。
最近覚えたNuxtJSのTipsを紹介するシリーズ、今回は2回目です。

今回のテーマは「axiosでBigIntを扱う」です。

先日とあるサービスの開発をやっている際に、axiosでユーザ情報の取得を行ったら、フロント側で表示されるユーザIDとサーバ側に保存してあるユーザIDが食い違ってしまう事象が発生しました。

どうやらサーバから返されているユーザIDが20桁ぐらいある整数のため、丸め処理が入っているように見えます。
javascriptで扱える整数の最大値はNumber.MAX_SAFE_INTEGERで確認できますが、それを超えてしまっていたのが原因のようです。

そこで、json-bigintというモジュールをaxiosのレスポンス部分に噛ませて解決することにしました。

まずはインストール

npm install -d json-bigint

axiosに組み込む

axiosに組み込むにはtransformResponseという機能を使います。
以下例です。

import axios from 'axios'
import JSONbig from 'json-bigint'

getUser() {
  return axios.$get('https://hoge.com/api/user/',{
    transformResponse: [data => {
      return JSONbig.parse(data) //普通にパースされる前にjson-bigintを使う
    }]
  })
}

getUser()
.then(res => {
  // resを用いた処理
})

これでBigIntも扱えるようになりました。

というかユーザIDのような、別に計算に使うわけでもなく、変更も加えるわけでもない値であれば、そもそも文字列で返してもらえば早かったかも?
その辺は実際に作るときに担当の方と相談してみるのも解決策の一つかもしれませんね。

まとめ

2回に渡りお送りしてきたNuxtJSのTipsシリーズ、いかがでしたでしょうか。
ここ1年ぐらいNuxtJSを主に触っていて大分色々覚えたなぁと思っていましたが、まだまだ知らないことだらけ。勉強することがたくさんありますね。